Desplegables de segundo nivel en contenidos
En el Gestor de Contenidos tenemos la posibilidad de hacer secciones en un contenido eligiendo "Estructura Compleja", pero en algunos casos esto no es suficiente, y los contenidos muy complejos requieren una estructura más compleja con secciones a diferentes niveles.
Para ello, se ha utilizado la técnica "include", que consiste en mostrar un contenido dentro de otro contenido con el siguiente código:
<!--#include virtual="edukiaren-urla"-->
Esta técnica funciona pero no crea un código HTML estándar y accesible y queda fuera de la lógica interna del gestor de contenidos. Por ello, es preferible crear estas subsecciones mediante la etiqueta HTML <details>.
Aqui hay un ejemplo en HTML:
<details class="tolesgarria">
<summary>Dentro de la etiqueta Summary escribimos el texto que abre y cierra esta desplegable</summary>
<p>Aqui pondremos la información que queramos, y que por defecto aparecera oculta (plegada)</p>
</details>
Y se visualiza así:
Nombre del desplegable, que se establece en la etiqueta <summary>
Tras la etiqueta Summary podemos añadir la información que queramos, tanto texto como imágenes, multimedia, formularios...

Autor: Pascale Bourget. Origen de la imagen .
La subsección aparece doblada, pero podemos obligarla a aparecer abierta con la propiedad "open" de la siguiente forma:
<details class="tolesgarria" open="">
Recuerda, para hacer desplegables de primer nivel utilizar siempre la opción "estructura compleja" que proporciona el gestor de contenidos, no la etiqueta <details>. Utiliza esta última etiqueta solo para hacer desplegables secundarios. El uso de la etiqueta <details> es funcional en cualquier portal de Euskadi.eus pero los estilos CSS estan definidos solo en los portales de Gobierno y Departamentos (web01), si quieres usarlo en otro portal ponte en contacto con Web Zerbitzua
Si utilizamos la etiqueta <details> dentro de un desplegable, éste adoptará el otro aspecto para evitar confusión con el desplegable principal:
Como siempre, aquí dentro podemos introducir la información que queramos Hemos "enlazado" estos dos desplegables de segundo nivel con la propiedad "name", si uno se abre el otro se cerrará automáticamenteEste desplegable se encuentra dentro de un desplegable de primer orden
Este desplegable también está dentro de un desplegable de primer nivel
Aquí hay disponible más información sobre la etiqueta <details>: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details
Fecha de última modificación:
