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&ch=1"><span class="chapter">一</span></a>
<a href="../../curriculum/cantonese/textbook.php?cls=C1&ch=2"><span class="chapter">二</span></a>
<a href="../../curriculum/cantonese/textbook.php?cls=C1&ch=3"><span class="chapter">三</span></a>
<a href="../../curriculum/cantonese/textbook.php?cls=C1&ch=4"><span class="chapter">四</span></a>
<a href="../../curriculum/cantonese/textbook.php?cls=C1&ch=5"><span class="chapter">五</span></a>
<a href="../../curriculum/cantonese/textbook.php?cls=C1&ch=6"><span class="chapter">六</span></a>
<a href="../../curriculum/cantonese/textbook.php?cls=C1&ch=7"><span class="chapter">七</span></a>
<a href="../../curriculum/cantonese/textbook.php?cls=C1&ch=8"><span class="chapter">八</span></a>
<a href="../../curriculum/cantonese/textbook.php?cls=C1&ch=9"><span class="chapter">九</span></a>
<a href="../../curriculum/cantonese/textbook.php?cls=C1&ch=10"><span class="chapter">十</span></a>
<a href="../../curriculum/cantonese/textbook.php?cls=C1&ch=11"><span class="chapter">十一</span></a>
<a href="../../curriculum/cantonese/textbook.php?cls=C1&ch=12"><span class="chapter">十二</span></a>
<a href="../../curriculum/cantonese/textbook.php?cls=C1&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.
Conceptually there are a couple obvious ways to achieve this.
The trick to it is that just about all of these techniques are made simple by applying your javascript to the parent of all the divs which should behave when selected.