web-dev-qa-db-fra.com

Commutateur/bascule div (jquery)

Je souhaite accomplir une tâche assez simple (j'espère!)

J'ai deux balises div et 1 balises d'ancrage, comme ceci:

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

Ce que je souhaite accomplir, c’est d’utiliser la balise anchor pour basculer entre les deux balises div, masquer l’une et montrer l’autre et inversement 

Comment cela peut-il être fait de la meilleure façon?

Meilleures salutations.

jqueryhtmlswitch-statementtoggle
17
Jan

Comme un div est initialement caché, vous pouvez simplement appeler bascule pour les deux 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>
40
CMS

Je pense que tu veux ça:

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

ou

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

Ceci est rendu possible par JQuery

J'espère que cela t'aides...

4
norbertB

Que dis-tu de ça

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

Pour votre HTML ressemblant à:

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

Hé, d'accord! Une ligne! Je <3 jQuery.

1
Brandon Montgomery

Vous pouvez écrire un simple plugin jQuery pour le faire. Le plugin ressemblerait à ceci:

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

Connectez ensuite le plug-in à l'événement click de la balise anchor:

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

Si vous définissez les attributs «d'affichage» initiaux pour chaque div en tant que «bloc» et «aucun» respectivement, ils devraient basculer en affichage/masquage lorsque le lien est cliqué.

0
pmarflee

J'ai utilisé cette méthode pour créer plusieurs blocs sans créer de nouveau 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>

Ensuite, une partie js pour tous ces cas:

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

Décrite ici

0
Alex K

Je pense que ça marche

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

});
0
wdspot

essayez ceci http://www.webtrickss.com/javascript/jquery-slidetoggle-signup-form-and-login-form/

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

Voici comment je bascule deux div en même temps: 

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

Ça marche !

0
mokrane