basculer tous les liens, en utilisant jquery

Question

Je l'effet d'ouverture/fermeture qui se passe ici plusieurs fois: test site

je besoin d'ajouter un lien appelé « basculer tous » sous le titre de la page et lorsque vous cliquez dessus, il ouvrir/fermer chaque niveau de parrainage. Comment puis je faire ça?

Voir le code de travail:

<h3 class="trigger">Presenting Sponsor</h3> 
<div class="toggle_container"> content inside toggle_container is hidden/shown when trigger class is clicked</div> 



$(document).ready(function(){ 
    $(".toggle_container").hide(); 
    $("h3.trigger").click(function(){ 
    $(this).toggleClass("active").next().slideToggle("fast"); 
    return false; 
}); 
}); 

Answer 1

$("#toggle_button").click(function() { 
    $("h3.trigger").toggleClass("active").next().slideToggle("fast"); 
}); 

Exemple de travail:. http://jsfiddle.net/andrewwhitaker/zxvxA/

Answer 2

<a href="#" id="all_toogle">toogle all</a> 

$('#all_toggle').click(function(){ 
    var open = $(this).toogleClass('active').hasClass('active'); 
    $("h3.trigger").each(function(){ 
     if(open){ 
      $(this).addClass("active").next().stop(true, true).slideDown("fast"); 
     } else { 
      $(this).removeClass("active").next().stop(true, true).slideUp("fast"); 
     } 
    }); 
}); 

Il tient compte des sponshorship actuellement ouvert ou fermé. ".stop (true, true)" est utilisé pour empêcher les "chaînes" d'animation lorsque l'on clique plusieurs fois sur le bouton bascule.

Vous devez également utiliser "event.PreventDefault();" au lieu de "return false" dans vos fonctions d'événement de clic (vous devrez modifier la déclaration .cliquez (function (event) {...)

Answer 3

$(".openAll").click(function(){ 

    $("h3.trigger").addClass("active").next().slideDown("fast"); 

}); 

Answer 4

Peut-être

var toggle = true; 

var toggleAll = function(){ 
    $("h3.trigger").removeClass("active"); 

    if(toggle){ 
     $("h3.trigger").next().slideDown("fast"); 
    } else { 
     $("h3.trigger").next().slideUp("fast"); 
    } 

    toggle = (!toggle); 
}; 

Answer 5

JQuery prend en charge les caractères génériques lors de l'association, ce qui vous permet de faire quelque chose comme:

$("a[name=showAllLink]").click(function() { 
    var linkTxt = $("a[name=showAllLink]").html(); 
    if (linkTxt.indexOf('Show')>=0) { 
     linkTxt = linkTxt.replace(/Show/,"Hide"); 
     $("div[class*=toggle_container]").show(); 
    } 
    else { 
     linkTxt = linkTxt.replace(/Hide/,"Show"); 
     $("div[class*=toggle_container]").hide(); 
    } 
    $("a[name=showAllLink]").html(linkTxt); 
}); 

Qui, lorsque l'ancre "showAll" est cliqué, les affichera tous. Le texte de l'ancre alterne entre "Afficher tout" et "Masquer tout".

<a href="javascript:void(0)" name="showAllLink">Show All</a>