As shown in here: http://www.learningjquery.com/2007/03/accordion-madness. But I need help to edit it so that it will work for my circumstances.

Sample 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 [Work In Progress]

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

So when the end-user click on div.book, div.chapters will expand. And only one div.chapters will be shown at a time. So if a div.chapters is already open, then it will close the open one first before animating the one the user clicked on.