Switch/toggle div (jquery)

Question

Hello.

I wish to accomplish a simple task (I hope!)

I got two div tags and 1 anchor tags, like this:

<a href="javascript:void(0);">forgot password?</a>
<div id="login-form"></div>
<div id="recover-password" style="display:none;"></div>

What I wish to accomplish is use the anchor tag to toggle between the two div tags, hide the one and show the other and visa versa.

How can this be done the best way?

Best regards.

Answer 1

First, add an ID to your hyperlink to make it easier to attach event handlers...

<a id="toggle" href="javascript:void(0);">forgot password?</a>
<div id="login-form"></div>
<div id="recover-password" style="display:none;"></div>

Then, write a bit of script to wire up a click event. We'll use the jQuery toggle() helper to attach handlers for both states:

$(function() // run after page loads
{
  $("#toggle").toggle(function()
  { // first click hides login form, shows password recovery
    $("#login-form").hide();
    $("#recover-password").show();
  },
  function()
  { // next click shows login form, hides password recovery
    $("#login-form").show();
    $("#recover-password").hide();
  });
});

Alternately, you can take advantage of jQuery's toggle() effect to simplify the code (as CMS points out):

$(function() // run after page loads
{
  $("#toggle").click(function()
  { 
    // hides matched elements if shown, shows if hidden
    $("#login-form, #recover-password").toggle();
  });
});

Answer 2

You could write a simple jQuery plugin to do this. The plugin would look like:

(function($) {
$.fn.expandcollapse = function() {
    return this.each(function() {
        obj = $(this);
        switch (obj.css("display")) {
            case "block":
                displayValue = "none";
                break;

            case "none":                    
            default:
                displayValue = "block";
        }

        obj.css("display", displayValue);
    });
};

} (jQuery));

Then wire the plugin up to the click event for the anchor tag:

$(document).ready(function() {
    $("#mylink").click(function() {
        $("div").expandcollapse();
    });
});

Providing that you set the initial 'display' attributes for each div to be 'block' and 'none' respectively, they should switch to being shown/hidden when the link is clicked.

Answer 3

Since one div is initially hidden, you can simply call toggle for both divs:

<a href="javascript:void(0);" id="forgot-password">forgot password?</a>
<div id="login-form">login form</div>

<div id="recover-password" style="display:none;">recover password</div>

<script type="text/javascript">
$(function(){
  $('#forgot-password').click(function(){
     $('#login-form').toggle();
     $('#recover-password').toggle(); 
  });
});
</script>

Answer 4

I think you want this:

$('#recover-password').show();

or

$('#recover-password').toggle();

This is made possible by JQuery

Hope this helps...

Answer 5

How about this

<script type="text/javascript" language="javascript">
    $("#toggle").click(function() { $("#login-form, #recover-password").toggle(); });
</script>

For your HTML looking like:

<a id="toggle" href="javascript:void(0);">forgot password?</a>
<div id="login-form"></div>
<div id="recover-password" style="display:none;"></div>

Hey, alright! One line! I <3 jQuery.

Answer 6

I saw a solution on eRunways a while ago.