一度に1つだけ開いた状態でクリック時にdivを展開するにはどうすればよいですか？

Question

ここに示すように： http://www.learningjquery.com/2007/03/accordion-madness. 。しかし、私はそれが私の状況に合わせて機能するように編集するために助けが必要です。

サンプルHTML

<div class="row even">
<div class="info">
  <div class="class">CK1</div>
  <div class="teacher_chinese">老師</div>
  <div class="teacher_english">Teacher Name</div>
  <div class="assistant_chinese">助教</div>
  <div class="assistant_english">Assistant Name</div>
  <div class="room">Room 00</div>
  <div class="book"></div>
</div>
<div class="chapters">
  <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=1"><span class="chapter">一</span></a>
  <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=2"><span class="chapter">二</span></a>
  <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=3"><span class="chapter">三</span></a>
  <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=4"><span class="chapter">四</span></a>
  <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=5"><span class="chapter">五</span></a>
  <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=6"><span class="chapter">六</span></a>
  <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=7"><span class="chapter">七</span></a>
  <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=8"><span class="chapter">八</span></a>
  <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=9"><span class="chapter">九</span></a>
  <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=10"><span class="chapter">十</span></a>
  <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=11"><span class="chapter">十一</span></a>
  <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=12"><span class="chapter">十二</span></a>
  <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=13"><span class="chapter">十三</span></a>
</div>
</div>

jQuery [進行中の作業

$(document).ready(function() {
$('div#table_cantonese .chapters').hide();
$('div#table_cantonese .book').click(function() {
  var $nextDiv = $(this).next();
  var $visibleSiblings = $nextDiv.siblings('div:visible');
  if ($visibleSiblings.length ) {
    $visibleSiblings.slideUp('fast', function() {
      $nextDiv.slideToggle('fast');
    });
  } else {
    $nextDiv.slideToggle('fast');
  }
}); 
});

したがって、エンドユーザーがdiv.bookをクリックすると、div.chaptersが展開されます。一度に1つのdiv.chaptersのみが表示されます。したがって、div.chaptersがすでに開いている場合、ユーザーがクリックしたものをアニメーション化する前に、最初に開いたものを閉じます。

Answer 1

概念的には、これを達成するためのいくつかの明白な方法があります。

1. この瞬間に開くべきであるDivにハンドルを保持してみてください。新しいDivが選択されたら、最初に開いたDivを非表示にしてから、新しいDivを開き、現在開いているDivに現在開いているハンドルを割り当てます。
2. クリックすると、何があってもすべてのdivを閉じるだけで、選択されたdivだけを開くようにします。
3. ...

それの秘trickは、これらの手法のほぼすべてが、選択したときに動作するはずのすべてのDIVの親にJavaScriptを適用することにより、単純にされることです。

Answer 2

グローバル変数を使用して、以前に開いたDivを保存します。次に、新しいDivが開かれたら、以前に開いたものを閉じます。

var prev=false;

//...

if(prev!==false)
    // close prev
prev = new_div;