SImple afficher/masquer jquery pour plusieurs instances indépendantes?

Question

Existe-t-il un moyen d'avoir de nombreuses instances de show/hide basées sur jquery (basculer le lien suivi d'un conteneur avec du contenu caché, basculer les changements de texte en fonction de l'état) sur une page en utilisant uniquement des classes? Je n'ai trouvé aucun exemple fonctionnel raisonnablement bien documenté. Merci pour toute aide! --cg

Answer 1

Quelque chose comme:

<div class="toggleset"> 
    <a class="toggler" href="#">Hide</a> 
    <div class="container"> 
    Data to show/hide 
    </div> 
</div> 

$('.toggler').click(function(evt) { 
    var $toggler = $(this); 
    var $container = $toggler.siblings('.container'); 

    $container.toggle(); 
    $toggler.text($container.is(':visible') ? "Hide" : "Show"); 
    evt.preventDefault(); 
}); 

Vous n'avez pas besoin de la div externe si vous utilisez next() au lieu de frères et sœurs, mais il lie le script plus représentatif des balises.

Answer 2

Merci beaucoup, Rob. Fonctionne bien! J'ai réussi à faire en sorte des classes secondaires peut contrôler ce que le texte de bascule est dans les deux états:

<script type="text/javascript"> 
<!-- 
$(document).ready(function() { 

$('.toggler.show').click(function(evt) { 
    var $toggler = $(this); 
    var $container = $toggler.siblings('.container'); 

    $container.toggle(); 
    $toggler.text($container.is(':visible') ? "Show less" : "Show more"); 
    $(this).toggleClass('active'); 
}) 

$('.toggler.read').click(function(evt) { 
    var $toggler = $(this); 
    var $container = $toggler.siblings('.container'); 

    $container.toggle(); 
    $toggler.text($container.is(':visible') ? "Read less" : "... Read more"); 
    $(this).toggleClass('active'); 
}) 
evt.preventDefault(); 
}); 
--> 
</script> 

Comment pourrais-je tirer parti de jquery bascule « slide »? J'ai essayé de changer

$container.toggle(); 

à quelque chose comme

$container.slideToggle('fast'); 

mais qui brise le changement de texte sur la bascule. --cg