Desplegar y ocultar el contenido de un div con jQuery.

   Con un código, en jQuery,  tan sencillo como el siguiente:


<!-- desplegar/ocultar contenido menu -->
<script type="text/javascript">
$(document).ready(function () {

$('nav').on('click','li',function () {

var $submenu=$(this).next('div.submenu');

if ($submenu.is(':hidden')) {
$submenu.slideDown('100');
} else {
$submenu.slideUp('100');
}

});

});
</script>

desplegamos y ocultamos el contenido de un div.

   Siguiendo como ejemplo la página Las Edades de la Tierra, en la cual, en su parte izquierda, podéis desplegar y ocultar el contenido de las diferentes Eras, voy a tratar de explicar como poner en práctica este ejemplo. Una parte del código HTML 5 podría ser como lo que sigue:


<section>
<nav>
<article class="menu menuuno">
<hgroup>
<h2 class="titulo">CENOZOICO</h2>
<ul class="menu1">
<li><h2>Cuaternario (hace 2 millones y medio de años)</h2></li>
           <div class="submenu">
AQUI EL CONTENIDO
</div>
<li><h2>Neógeno (hace 23 millones de años)</h2></li>
           <div class="submenu">
AQUI EL CONTENIDO
</div>
<li><h2>Paleógeno (hace 65 millones de años)</h2></li>
          <div class="submenu">
               AQUI EL CONTENIDO
              </div>
    </ul>
</hgroup>
</article>
</nav>
</section>

En este ejemplo el código es en HTML5 aunque puede aplicarse a un HTML normal.

El CSS del div "submenu" (dentro del cual tenemos el contenido que queremos desplegar y ocultar) es:

.submenu {
display:none;
overflow:hidden;
}

Es importante que, en un principio, el contenido esté oculto (display:none).

   Explico un poco el código jQuery. Con la linea $('nav').on('click','li',function () queremos decir que cuando se haga click en cualquier "li" que esté dentro de "nav" se ejecute lo que sigue después. En la variable "$submenu" guardamos el div que está dentro del li sobre el que cliqueamos (en este ejemplo el div llamado submenu). Después comprobamos si está oculto (if ($submenu.is(':hidden'))), si es así lo desplegamos ($submenu.slideDown('100')), en caso contrario lo ocultamos ($submenu.slideUp('100')).

   Así de sencillo.