[jquery] Switch/toggle div (jQuery)

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

I got two div tags and one 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>

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

How can this be done the best way?

This is how I toggle two divs at the same time:

$('#login-form, #recover-password').toggle();

It works!

I used this way to do that for multiple blocks without conjuring new JavaScript code:

<a href="#" data-toggle="thatblock">Show/Hide Content</a>

<div id="thatblock" style="display: none">
  Here is some description that will appear when we click on the button
</div>

Then a JavaScript portion for all such cases:

$(function() {
  $('*[data-toggle]').click(function() {
    $('#'+$(this).attr('data-toggle')).toggle();
    return false;
  });
});

I think this works:

$(document).ready(function(){

    // Hide (collapse) the toggle containers on load
    $(".toggle_container").hide();

    // Switch the "Open" and "Close" state per click then 
    // slide up/down (depending on open/close state)
    $("h2.trigger").click(function(){
        $(this).toggleClass("active").next().slideToggle("slow");
        return false; // Prevent the browser jump to the link anchor
    });
});

function toggling_fields_contact_bank(class_name) {
    jQuery("." + class_name).animate({
        height: 'toggle'
    });
}

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.

Use this:

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

Your HTML should look 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, all right! One line! I <3 jQuery.

Try this: http://www.webtrickss.com/javascript/jquery-slidetoggle-signup-form-and-login-form/

????????????????????????????????????????????????

I think you want this:

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

or

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

This is made possible by jQuery.