Esquema desplegable

En este script puedes ver como usar una lista que se despliega al pulsar con el ratón

Es parecido al menú deslegable pero el efecto se produce al hacer click sobre la cabecera.

Solución

 

<script>

function cambiaEstado(iden){

var elhtml = document.getElementById(iden);

if (elhtml.style.display == 'block')

     elhtml.style.display = 'none';

else

     elhtml.style.display = 'block';

}

</script>

<body>

<ul>

<li><a href="javascript:cambiaEstado('e1')">entrada 1</a>

<ul id="e1" style="display:none">

    <li>apartado 1 de entrada 1</li>

    <li>apartado 2 de entrada 1</li>

</ul>

</li>

<li><a href="javascript:cambiaEstado('e2')">entrada 2</a>

<ul id="e2" style="display:none">

    <li>apartado 1 de entrada 2</li>

    <li>apartado 2 de entrada 2 </li>

</ul>

</li>

</ul>

</body>

Explicación

Un enlace llama ala función cambiaEstado() que recibe como argumento el id de la lista que tiene que recoger o desplegar.

En la función se usa el método getElementById( ) para encontrar el bloque de lista para cambiar.

La función desplliega o recoge la lista mediante la propiedad display. La alterna ent re block para que la lista se vea y none para que se oculte

Como lo uso

El uso es sencillo: una lista ordenada o desordenada. Los items de esta lista contenedora poseen un enlace que llama a la función cambiaEstado() con el argumento de la lista desplegable.

Junto al enlace el item de la lsita contenedora posee otra lista, la que se muestra y oculta al pulsar en el enlace.