Problème de basculement de la visibilité de plusieurs divs, puisque toggle() suit chaque élément séparément

Question

J'ai une série de boutons input. Disons deux pour la simplicité. Chaque bouton a son propre contenu associé dans un div séparé. Tout le contenu est en divs invisibles (display: none) pour commencer.

Si vous cliquez sur un bouton, son contenu associé est affiché. Si vous cliquez à nouveau dessus, le contenu disparaît. Ceci est fait avec toggle(). Le problème est que si vous cliquez sur un bouton, puis cliquez sur l'autre bouton, les deux div sont maintenant visibles.

Donc, ma question principale est la meilleure façon de résoudre ce problème. La solution que j'ai essayée ne fonctionne pas, donc si vous avez une approche entièrement nouvelle, s'il vous plaît faites le moi savoir, ou si vous pouvez affiner mon approche pour le faire fonctionner, ce serait génial aussi. Ok, sur la façon dont j'ai essayé de résoudre cela.

Pour résoudre ce problème, j'ai utilisé siblings() pour m'assurer que tout le contenu divs est invisible avant l'apparition d'un nouveau contenu divs.

Alors maintenant, si je clique sur 1, il apparaît. Si je clique sur 2, 1 et 2 disparait semble ..... mais maintenant, si je clique sur 1 à nouveau rien ne se passe (parce qu'il est mon deuxième clic sur le numéro 1, et toggle() conserve la trace de chaque bouton)

Comment puis-je implémenter ce type de changement de contenu sans rencontrer ces problèmes?

(Sur la page réelle, il y a un nombre inconnu de boutons/combos div et l'utilisateur peut cliquer sur eux dans un ordre quelconque)

Here's an example of the problem code (click 1, 2, then 1)

Merci!

---

On dirait que la réponse peut être quelque chose en utilisant .trigger('click') et :visible ... juste de la difficulté à le faire fonctionner .....

Answer 1

essayez ceci: http://jsfiddle.net/TennG/

Answer 2

Pour atteindre les résultats souhaités, maintenir l'état distinct pour chaque div (en utilisant des classes pour représenter caché et visible, et ne pas utiliser la fonction de bascule.

$("input").click(
    function(event) { 
     var theDiv = $("#d" + $(event.target).attr('id')); 
     var wasHidden = theDiv.hasClass("hiddenDiv"); 
     $(".visibleDiv").removeClass("visibleDiv").addClass("hiddenDiv"); 
     if(wasHidden){ 
      theDiv.removeClass("hiddenDiv").addClass("visibleDiv"); 
     } 
    } 
) 

div div.hiddenDiv { 
    display: none; 
} 
div div.visibleDiv { 
    display: inline: 
} 

<input id="i1" type="button" value="one" /> 
<input id="i2" type="button" value="two" /> 
<div> 
    <div id="di1" class="hiddenDiv ">This is the first one.</div> 
    <div id="di2" class="hiddenDiv ">And here we have number two.</div> 
</div> 

La technique peut se résumer comme suit

1. Commencez avec tous les divs cachés
2. Lorsqu'un clic se produit, regardez la div pertinentes, pour voir si elle était cachée
3. Retirez la classe visible de tous les divs qui l'a, et remplace par la classe cachée
4. Si la div était précédemment cachée, remoe la classe cachée et la remplace par la classe visible.