DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Acordeón

Mostrar y ocultar

Se trata de un listado de elementos organizados verticalmente que permite mostrar y ocultar el contenido de dichos elementos. En general se usan para agrupar información que se consume por bloques, como preguntas frecuentes, detalles de un elemento, fases de un proceso, etc.

Collapsible

Por defecto

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/collapsible/_macro.collapsible.njk" import componentCollapsible %}
{{ componentCollapsible({
  "id": "collapsible-default",
  "headerText": "Cabecera del collapsible",
  "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n      proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}) }}

Expandido

Añade open: true a un item para mostrarlo abierto inicialmente.

Mostrar códigodel ejemplo: Expandido

Contenido

Nunjucks macro
{% from "components/collapsible/_macro.collapsible.njk" import componentCollapsible %}
{{ componentCollapsible({
  "id": "collapsible-initially-expanded",
  "headerText": "Cabecera del collapsible",
  "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  "open": true
}) }}

Expandido con javascript

También puedes usar con javascript la función global activateItemCollapsible(element, open), para mostrar un item abierto o cerrado, usando su id, el parámetro open admite true o false, si le pasamos true se mostrará abierto, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe activateItemCollapsible('collapsible-expanded-title', true) para mostrar el item actual abierto.

Mostrar códigodel ejemplo: Expandido con javascript

Contenido

Nunjucks macro
{% from "components/collapsible/_macro.collapsible.njk" import componentCollapsible %}
{{ componentCollapsible({
  "id": "collapsible-expanded",
  "headerText": "Cabecera del collapsible",
  "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n      proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}) }}

Con html

Mostrar códigodel ejemplo: Con html

Contenido

Nunjucks macro
{% from "components/collapsible/_macro.collapsible.njk" import componentCollapsible %}
{{ componentCollapsible({
  "id": "collapsible-html",
  "headerText": "Cabecera del collapsible",
  "html": "<p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit, sed do eiusmod\n      tempor <em>incididunt</em> ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n      consequat. Duis aute irure dolor in <strong>reprehenderit</strong> in voluptate velit esse\n      cillum dolore eu fugiat nulla <em>pariatur</em>. Excepteur sint occaecat cupidatat non\n      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>"
}) }}

Con clases aplicadas

Puedes añadir clases a todos los elementos para cambiar su apariencia

Mostrar códigodel ejemplo: Con clases aplicadas

Contenido

Nunjucks macro
{% from "components/collapsible/_macro.collapsible.njk" import componentCollapsible %}
{{ componentCollapsible({
  "id": "collapsible-classes",
  "headerText": "Cabecera del collapsible",
  "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  "classes": "p-base bg-primary-light flex flex-wrap gap-base",
  "buttonClasses": "c-button self-start",
  "showClasses": "hidden!",
  "hideClasses": "hidden!",
  "contentClasses": "flex-1 border border-neutral-base p-base bg-white rounded-sm"
}) }}