¿Cómo puedo hacer un div despliegue al hacer clic con el único abierto a la vez?

Question

Como se muestra aquí: http://www.learningjquery.com/2007/ 03 / acordeón locura . Pero necesito ayuda para editarla para que se va a trabajar para mis circunstancias.

Ejemplo de 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 [Trabajo en Progreso]

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

Así que cuando el usuario final, haga clic en div.book, div.chapters se expandirá. Y sólo una div.chapters se le aparecen a la vez. Así que si un div.chapters ya está abierto, entonces se cerrará la que está abierta antes de la animación de la que el usuario ha hecho clic en.

Answer 1

Conceptualmente hay un par de maneras obvias para lograrlo.

1. Usted podría tratar de mantener un identificador para el div que debe ser abierta en este mismo momento. Cuando un nuevo div es seleccionado, primero ocultar el div abierto, a continuación, abra el nuevo div y asignar el manija actualmente abierto a la ahora div abierto.
2. hacerlo de modo que al hacer clic en ninguna, simplemente cierra todos los divs sin lo que importa, a continuación, se abre sólo la div que fue seleccionado.
3. ...

El truco para esto es que casi todas estas técnicas se simplifica gracias a la aplicación de su javascript para el padre de todos los divs que debe comportarse cuando se selecciona.

Answer 2

Usar una variable global para almacenar el DIV previamente abierto. Luego, cuando se abre una nueva DIV, cerca del uno abierto anteriormente.

var prev=false;

//...

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