jQuery et basculer entre les divs de contenu

Question

Ok, donc cela fonctionne bien pour activer et désactiver un message à la fois. Le script ne peut toujours pas voir qu'il doit rendre les messages OTHER mis à afficher = "none" lorsque l'utilisateur clique sur un nouveau. Donc, si je clique sur le second post après le premier, cela doit masquer le contenu associé au premier et le div affiche alors le texte pour le second post. Et en avant à travers plusieurs titres de poste. Quelle est la meilleure approche pensez-vous? Voici le code qui active et désactive un sujet (cliquez une fois pour afficher, cliquez à nouveau pour masquer). Mais cliquer sur un sujet puis sur un autre incrémente le contenu, ce qui n'est pas ce que je voudrais ... Je sais que j'ai déjà fait ça il y a un an, je ne me rappelle plus comment je l'ai fait.

---

<script type="text/javascript"> 
function togglePost(obj) { 
      var obj=document.getElementById(obj); 
      if (obj.style.display == "block") obj.style.display = "none"; 
      else if (obj.style.display = "none") obj.style.display = "block"; 
    else obj.style.display = "none"; 
} 
</script> 

<div id="container"> 
    <div id="sidebar"> 
    <h3>Posts</h3> 
    <p><span onClick="togglePost('q1')">October</span></p> 
    <p><span onClick="togglePost('q2')">November</span></p> 
    <p><span onClick="togglePost('q3')">December</span></p> 
    </div> 

    <div id="center"> 
    <h1> Main Page of post content</h1> 
    <p><div id="q1" style="display:none;">October is...testtext testtext testtext</div></p> 
<p><div id="q2" style="display:none;">November is...testtext testtext testtext</div></p> 
<p><div id="q3" style="display:none;">December is...testtext testtext testtext</div></p> 
</div> 
<br class="clearfloat" /> 
</div> 

---

Answer 1

Dans votre fonction, il suffit de les régler tous pour afficher = none, puis afficher celui que vous voulez .

function togglePost(obj) { 
      var obj=document.getElementById(obj); 
      var was_hidden = obj.style.display == "none"; 
      $('[id^=q]').hide(); 
      if (was_hidden) $(obj).show(); 
} 

Answer 2

Utilisez http://api.jquery.com/toggle/

Answer 3

Vous pouvez faire vos travées ressemblent à ceci:

<p><span class="q1">October</span></p> 
<p><span class="q2">November</span></p> 
<p><span class="q3">December</span></p> 

et remplacer votre Javascript avec ceci:

$(document).ready(function() { 

    // unobtrusively attach onclick handlers to all span elements in the sidebar 
    // the className of each span corresponds to the ID of the div which it toggles 
    $("#sidebar span").click(function() { 
     $('#' + $(this).attr("class")).toggle(); 
    }); 
}); 

Démo: http://jsfiddle.net/9Nqgs/

Answer 4

Puisque vous dites que jQuery dans la question que je Güssing qui est disponible

function togglePost(id) { 
    $('#center div').hide(); 
    $('#' + id).show(); 
}