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 y es tot/nada: aparece y desaparece, sin animación

Solución

 

<script>

function cambiaEstado(iden){

   let 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 a la función cambiaEstado() con un argument: el id de la lista que tiene que recogerse o desplegar.

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

La función muestra u oculta la lista mediante la propiedad display. La alterna entre 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.