onlick show a form

[arbitter]

Hello,

 

I'm new to javascript and can't figure out how to do this. What I want is that there when you click on 'login', underneath it a form appears with 2 fields and a submit button.

 

Now, I can manage the form, but I don't know how to do the javascript part... Can someone get me started please?

[seventheyejosh]

<div>
      <a href="#" onclick="document.getElementById('loginForm').style.display='block';">Login</a>
</div>
<div id="loginForm" style="display:none;">
      <form>
            <!-- form stuff -->
      </form>
</div>

 

Like so?

[arbitter]

That is done very simple; I found another way eventually but this is a lot easier! Thanks a bunch!

[sean04]

How would you make it so one <div> disappears as another one appears. Kind of toggle divs.

[sean04]

Is there a shorter version of this. I made it so it toggles between "Edit Profile" and "Cancel"

 

<div id="showEditLink" style="block">
      <a href="#" onclick="document.getElementById('edit').style.display='block';document.getElementById('profile').style.display='none';document.getElementById('showProfileLink').style.display='block';document.getElementById('showEditLink').style.display='none';">Edit Profile</a>
</div>

<div id="showProfileLink" style="display:none">
  <a href="#" onclick="document.getElementById('edit').style.display='none';document.getElementById('showEditLink').style.display='block';document.getElementById('showProfileLink').style.display='none';document.getElementById('profile').style.display='block';">Cancel</a>
</div>

<div id="edit" style="display:none;">
 Name: <input value="Sean"/>	  
</div>

<div id="profile" style="display:block;">
Name: Sean
</div>

 

[seventheyejosh]

Try something like this. The first is just javascript, the second uses the jquery library ( <3 ) to hit all the classes you want to show / hide and change the element's display accordingly.

 

<!--    // functionized! //   -->

<script type="text/javascript">

    function show(which){
    
        if(which=='profile'){
        
            document.getElementById('edit').style.display='none';
            document.getElementById('showEditLink').style.display='block';
            document.getElementById('showProfileLink').style.display='none';
            document.getElementById('profile').style.display='block';
        
        }else{
        
            document.getElementById('edit').style.display='block';
            document.getElementById('profile').style.display='none';
            document.getElementById('showProfileLink').style.display='block';
            document.getElementById('showEditLink').style.display='none';
        
        }//end if
    
    }//end function

</script>

<div id="showEditLink" style="block">
      <a href="#" onclick="show('edit');">Edit Profile</a>
</div>

<div id="showProfileLink" style="display:none">
  <a href="#" onclick="show('profile');">Cancel</a>
</div>

<div id="edit" style="display:none;">
 Name: <input value="Sean"/>	  
</div>

<div id="profile" style="display:block;">
Name: Sean
</div>

<!--       // jquery //           -->

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

<script type="text/javascript">
    
    function toggle(show,hide){
    
        $("."+show).each(function(){
        
            $(this).css("display","block");
        
        });
        
        $("."+hide).each(function(){
        
            $(this).css("display","none");
        
        });
    
    }//end function
    
</script>

<div class="second" style="block">
      <a href="#" onclick="show('first');">Edit Profile</a>
</div>

<div class="first" style="display:none">
  <a href="#" onclick="show('second');">Cancel</a>
</div>

<div class="first" style="display:none;">
 Name: <input value="Sean"/>	  
</div>

<div class="second" style="display:block;">
Name: Sean
</div>