Afficher/masquer une div avec jquery plusieurs fois

Question

Je souhaite utiliser jquery pour faire un show/hide d'un DIV à partir d'un lien texte. Ce qui le rend un peu différent des exemples que j'ai trouvés sur ce site jusqu'à maintenant, c'est que j'ai besoin d'une manière générique de le faire plusieurs fois sur une page et aussi de pouvoir l'utiliser sur tout le site.

Ce serait vraiment bien si je peux mettre le JS dans un fichier séparé qui est inclus dans les pages, alors peut-être qu'il peut être enveloppé dans une fonction?

Quelqu'un peut-il m'aider ici? Pour le rendre générique, il pourrait être l'endroit où j'attribue un div qui est montré/caché avec un id comme id = "toggle-hide-1" et juste changer les numéros dans ma page pour en faire une autre zone d'affichage/cacher

Je pourrais simplement nommer l'ID en utilisant un nom qui rendra la fonction afficher/masquer une div et la séparer des autres divs qui montrent/cachent sur une page que je pourrais lui ajouter un numéro. Ci-dessous est un code partiel qui fera un show/hide d'un div sur un lien, mais ce n'est pas exactement ce dont j'ai besoin.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" > 
$(function() { 
    $(".view-code").click(function(evt) { 
     $(".tool_block, .view-code").toggle(); 
    }); 
}); 
</script> 
<a href="#" class="view-code" >view code</a> 
<a href="#" class="view-code" style="display:none">hide code</a> <br /> 

<div class="tool_block" style="display:none" > 
this stuff is hidden until we choose to show it! 
</div> 

Answer 1

La meilleure approche est probablement d'utiliser des attributs personnalisés. Si vous marquez votre ancrage avec un attribut qui indique à jquery quel div diviser, il sera plus facile d'écrire du code générique pour faire le travail.

Quelque chose comme ceci:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" > 
$(function() { 
    $(".view-code").click(function(evt) { 
     var d = $(this).attr("toolDiv"); 
     $(".tool_block[toolDiv=" + d + "], .view-code[toolDiv=" + d + "]").toggle(); 
    }); 
}); 
</script> 
<a href="#" class="view-code" toolDiv="1" >view code</a> 
<a href="#" class="view-code" toolDiv="1" style="display:none">hide code</a> <br /> 

<div class="tool_block" toolDiv="1" style="display:none" > 
this stuff is hidden until we choose to show it! 
</div> 

Ensuite, donnez chacun de vos paires d'ancre div une valeur toolDiv unique (qu'il ne doit pas être un nombre).

Answer 2

Si vous pouviez envelopper toute la collection dans un div, cela rendrait la tâche très facile.

$(function() { 
    $(".view-code").click(function(e) { 
     $(this).siblings().andSelf().toggle(); 
    }); 
}); 

<div> 
    <a href="#" class="view-code" >view code</a> 
    <a href="#" class="view-code" style="display:none">hide code</a> <br /> 

    <div class="tool_block" style="display:none" > 
    this stuff is hidden until we choose to show it! 
    </div> 
</div> 

Si elle ne gère pas le <br />, vous pouvez filtrer les frères et sœurs à seulement éléments div et d'ancrage.

Answer 3

Pourquoi ne pas utiliser des classes spécifiques à la place? Chaque élément que vous souhaitez afficher/caché peut avoir une classe appelée « basculeur », comme dans:

<div class="toggler"> 
... 
</div> 

Vous pouvez ensuite basculer la visibilité de tous les éléments avec cette classe à la fois, avec:

$(".toggler").toggle(); 

Dans ce scénario, cela ne fait aucune différence dans le document où ces éléments résident ou même dans quel type d'éléments ils se trouvent.

Si cette fonctionnalité doit être disponible dans le monde, vous pouvez toujours étendre jQuery lui-même avec une fonction personnalisée, comme dans:

$.toggleTogglers = function(toggleClass) { 
    $("." + toggleClass).toggle(); 
}; 

C'est bien dans que vous avez la flexibilité de choisir une classe personnalisée à bascule de votre propre conception.