jQuery и переключение между содержимым div

Question

Хорошо, так что это прекрасно работает для включения и выключения одного сообщения за раз.Сценарий по-прежнему не может видеть, что он должен установить для ДРУГИХ сообщений значение display = "none", когда пользователь нажимает на новое сообщение.Поэтому, если я нажимаю на заголовок второго сообщения после первого, это должно скрыть содержимое, связанное с первым, и вместо этого div отображает текст для второго сообщения.И далее через несколько заголовков сообщений.Какой лучший подход ты думаешь?Вот код, который включает и выключает одну тему (нажмите один раз, чтобы показать, нажмите еще раз, чтобы скрыть).Но нажатие на одну тему, а затем на другую, увеличивает содержимое одновременно, а это не то, что я хотел бы ... Я знаю, что делал это раньше, как год назад, я просто не помню, как я это сделал.

---

<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

В вашей функции просто установите для них все значение display = none, а затем покажите нужное.

Answer 2

Вы можете сделать так, чтобы ваши пролеты выглядели так:

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

И замените свой Javascript следующим:

$(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();
    });
});

Демо: http://jsfiddle.net/9Nqgs/

Answer 3

Поскольку вы говорите jQuery в вопросе, я думаю, что доступно

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

Answer 4

Использование http://api.jquery.com/toggle/