Switch/toggle div (jquery)

Question

I wish to accomplish a fairly 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 vice versa.

How can this be done the best way?

Best regards.

Answer 1

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 2

I think you want this:

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

or

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

This is made possible by JQuery

Hope this helps...

Answer 3

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 4

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 5

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

Answer 6

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
    });

});

Answer 7

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

<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 js portion for all such cases:

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

Described here

Answer 8

This is how i toggle two div at the same time :

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

it works !

Answer 9

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