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.

Accordion

Parámetros Nunjucks del componente: "Accordion". Versión: 4.0.0

Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.

        {"val":"params:\n- name: idPrefix\n  type: string\n  required: true\n  description: String to prefix id for each accordion item if no id is specified on each item.\n- name: headingLevel\n  type: number\n  required: false\n  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.\n- name: allowToggle\n  type: boolean\n  required: false\n  description: Defaults to `false`. Allow for each toggle to both open and close its section. Makes it possible for all sections to be closed. Assumes only one section may be open.\n- name: allowMultiple\n  type: boolean\n  required: false\n  description: Defaults to `false`. Allow for multiple accordion sections to be expanded at the same time. Assumes data-allow-toggle otherwise the toggle on open sections would be disabled.\n- name: heading\n  type: object\n  required: false\n  description: Options for the heading\n  params:\n  - name: text\n    type: string\n    required: true\n    description: If `html` is set, this is not required. Text to use within the heading. If `html` is provided, the `text` argument will be ignored.\n  - name: html\n    type: string\n    required: true\n    description: If `text` is set, this is not required. HTML to use within the heading. If `html` is provided, the `text` argument will be ignored.\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the heading.\n  - name: id\n    type: string\n    required: false\n    description: Id to add to the button to show or hide all elements. Not required, but recommended to improve the accessibility.\n- name: showControl\n  type: boolean\n  required: false\n  description: Defaults to `false`. If `true` a Show/Hide all button is displayed on top\n- name: items\n  type: array\n  required: true\n  description: Array of accordion items objects.\n  params:\n  - name: headerText\n    type: string\n    required: true\n    description: If `summmaryHtml` is set, this is not required. Text to use within the header element (the visible part of the accordion item element). If `headerHtml` is provided, the `headerText` argument will be ignored.\n  - name: headerHtml\n    type: string\n    required: true\n    description: If `summmaryText` is set, this is not required. HTML to use within the header element (the visible part of the accordion item element). If `headerHtml` is provided, the `headerText` argument will be ignored.\n  - name: text\n    type: string\n    required: true\n    description: If `html` is set, this is not required. Text to use within the disclosed part of the accordion item element. If `html` is provided, the `text` argument will be ignored.\n  - name: html\n    type: string\n    required: true\n    description: If `text` is set, this is not required. HTML to use within the disclosed part of the accordion item element. If `html` is provided, the `text` argument will be ignored.\n  - name: id\n    type: string\n    required: false\n    description: Id to add to the item. Not required, but recommended to improve the accessibility.\n  - name: open\n    type: boolean\n    required: false\n    description: If true, accordion item will be expanded.\n  - name: disabled\n    type: boolean\n    required: false\n    description: If true, accordion item will be disabled and will not show the show/hide control.\n  - name: show\n    type: object\n    required: false\n    description: Options to customize the show info\n    params:\n    - name: text\n      type: string\n      required: true\n      description: If `html` is set, this is not required. Text to use in show info. If `html` is provided, the `text` argument will be ignored.\n    - name: html\n      type: string\n      required: true\n      description: If `text` is set, this is not required. HTML to use within the show info. If `html` is provided, the `text` argument will be ignored.\n    - name: classes\n      type: string\n      required: false\n      description: Classes to add to the show info.\n  - name: hide\n    type: object\n    required: false\n    description: Options to customize the hide info\n    params:\n    - name: text\n      type: string\n      required: true\n      description: If `html` is set, this is not required. Text to use in hide info. If `html` is provided, the `text` argument will be ignored.\n    - name: html\n      type: string\n      required: true\n      description: If `text` is set, this is not required. HTML to use within the hide info. If `html` is provided, the `text` argument will be ignored.\n    - name: classes\n      type: string\n      required: false\n      description: Classes to add to the hide info.\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the accordion item element.\n  - name: attributes\n    type: object\n    required: false\n    description: HTML attributes (for example data attributes) to add to the accordion item.\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the accordion container.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the accordion container.\n","length":5111}

Por defecto

Si abres uno, se cierran el resto. Una vez que abres un item, se mantiene al menos un item abierto. Asume que allowmultiple: false y allowToggle: false aunque no se defina expresamente.

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- accordion -->
<div class="c-accordion">
  <div class="flex justify-between">
  </div>
  <div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="accordion-example-1-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="accordion-example-1"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 1</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="accordion-example-1"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="accordion-example-2-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="accordion-example-2"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 2</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="accordion-example-2"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="accordion-example-3-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="accordion-example-3"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 3</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="accordion-example-3"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /accordion -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "accordion-example",
  "headingLevel": 3,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "accordion-example",
  "headingLevel": 3,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Permite múltiples

Permite tener abiertos varios items a la vez sin cerrar automáticamente ninguno. Define allowmultiple: true y asume que allowToggle: true.

Ejemplo: "Permite múltiples", de código HTML, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- accordion -->
<div class="c-accordion" data-allow-multiple>
  <div class="flex justify-between">
  </div>
  <div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="allowmultiple-example-1-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="allowmultiple-example-1"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 1</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="allowmultiple-example-1"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="allowmultiple-example-2-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="allowmultiple-example-2"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 2</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="allowmultiple-example-2"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="allowmultiple-example-3-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="allowmultiple-example-3"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 3</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="allowmultiple-example-3"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /accordion -->

Ejemplo: "Permite múltiples", de código Nunjucks, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "allowmultiple-example",
  "headingLevel": 3,
  "allowMultiple": true,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Mostrar códigodel ejemplo: Permite múltiples

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "allowmultiple-example",
  "headingLevel": 3,
  "allowMultiple": true,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Permite cerrar

Si abres uno, se cierran el resto. Permite que cierres el que está abierto para que queden todos cerrados. Define allowToggle: true y asume que allowMultiple: false.

Ejemplo: "Permite cerrar", de código HTML, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- accordion -->
<div class="c-accordion" data-allow-toggle>
  <div class="flex justify-between">
  </div>
  <div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="allowtoggle-example-1-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="allowtoggle-example-1"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 1</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="allowtoggle-example-1"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="allowtoggle-example-2-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="allowtoggle-example-2"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 2</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="allowtoggle-example-2"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="allowtoggle-example-3-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="allowtoggle-example-3"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 3</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="allowtoggle-example-3"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /accordion -->

Ejemplo: "Permite cerrar", de código Nunjucks, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "allowtoggle-example",
  "headingLevel": 3,
  "allowToggle": true,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Mostrar códigodel ejemplo: Permite cerrar

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "allowtoggle-example",
  "headingLevel": 3,
  "allowToggle": true,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Con un item abierto

Podemos abrir inicialmente un item si le añadimos el parámetro 'open': true. También puedes usar con javascript la función global activateItemAccordion(elementMenu, activeItemId) para abrir un item, usando sus ids. Ej: Abre la consola del navegador y escribe activateItemAccordion('accordion', 'with-one-item-opened-example-1-title') para cerrar el item actual y abrir el primer item de este ejemplo.

Ejemplo: "Con un item abierto", de código HTML, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- accordion -->
<div class="c-accordion" id="accordion" data-allow-toggle>
  <div class="flex justify-between">
  </div>
  <div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="with-one-item-opened-example-1-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="with-one-item-opened-example-1"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 1</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="with-one-item-opened-example-1"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="with-one-item-opened-example-2-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="with-one-item-opened-example-2"
          aria-expanded="true">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 2</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show hidden">
              Mostrar
            </span>
            <span class="c-accordion__hide">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        id="with-one-item-opened-example-2"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="with-one-item-opened-example-3-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="with-one-item-opened-example-3"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 3</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="with-one-item-opened-example-3"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /accordion -->

Ejemplo: "Con un item abierto", de código Nunjucks, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "with-one-item-opened-example",
  "headingLevel": 3,
  "allowToggle": true,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "open": true
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ],
  "attributes": {
    "id": "accordion"
  }
}) }}

Mostrar códigodel ejemplo: Con un item abierto

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "with-one-item-opened-example",
  "headingLevel": 3,
  "allowToggle": true,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "open": true
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ],
  "attributes": {
    "id": "accordion"
  }
}) }}

Con 2 items abiertos

Podemos abrir inicialmente items si les añadimos el parámetro 'open': true. También puedes usar con javascript la función global activateItemAccordion(elementMenu, activeItemsIds) para abrir varios items, usando sus ids. Ej: Abre la consola del navegador y escribe activateItemAccordion('accordion-multiple', ['with-2-items-opened-example-2-title', 'with-2-items-opened-example-3-title']).

Ejemplo: "Con 2 items abiertos", de código HTML, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- accordion -->
<div class="c-accordion" id="accordion-multiple" data-allow-multiple>
  <div class="flex justify-between">
  </div>
  <div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="with-2-items-opened-example-1-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="with-2-items-opened-example-1"
          aria-expanded="true">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 1</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show hidden">
              Mostrar
            </span>
            <span class="c-accordion__hide">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        id="with-2-items-opened-example-1"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="with-2-items-opened-example-2-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="with-2-items-opened-example-2"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 2</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="with-2-items-opened-example-2"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="with-2-items-opened-example-3-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="with-2-items-opened-example-3"
          aria-expanded="true">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 3</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show hidden">
              Mostrar
            </span>
            <span class="c-accordion__hide">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        id="with-2-items-opened-example-3"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /accordion -->

Ejemplo: "Con 2 items abiertos", de código Nunjucks, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "with-2-items-opened-example",
  "headingLevel": 3,
  "allowMultiple": true,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "open": true
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "open": true
    }
  ],
  "attributes": {
    "id": "accordion-multiple"
  }
}) }}

Mostrar códigodel ejemplo: Con 2 items abiertos

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "with-2-items-opened-example",
  "headingLevel": 3,
  "allowMultiple": true,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "open": true
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "open": true
    }
  ],
  "attributes": {
    "id": "accordion-multiple"
  }
}) }}

Deshabilitados con allowtoggle y allowmultiple

Ocultará la infomación de mostrar/ocultar y deshabilitará el item para no poder ser clicado. Usando el parámetro 'disabled': true.

Ejemplo: "Deshabilitados con allowtoggle y allowmultiple", de código HTML, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- accordion -->
<div class="c-accordion" data-allow-toggle data-allow-multiple>
  <div class="flex justify-between">
  </div>
  <div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="accordion-disabled-1-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="accordion-disabled-1"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón no deshabilitado</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="accordion-disabled-1"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="accordion-disabled-2-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black cursor-not-allowed"
          aria-controls="accordion-disabled-2"
          aria-expanded="false"
          disabled>
          <span class="block pr-2xl pointer-events-none">Item de acordeón deshabilitado</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none hidden" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="accordion-disabled-2"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="accordion-disabled-3-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black cursor-not-allowed"
          aria-controls="accordion-disabled-3"
          aria-expanded="true"
          disabled>
          <span class="block pr-2xl pointer-events-none">Item de acordeón deshabilitado y abierto</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none hidden" aria-hidden="true">
            <span class="c-accordion__show hidden">
              Mostrar
            </span>
            <span class="c-accordion__hide">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        id="accordion-disabled-3"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /accordion -->

Ejemplo: "Deshabilitados con allowtoggle y allowmultiple", de código Nunjucks, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "accordion-disabled",
  "headingLevel": 3,
  "allowToggle": true,
  "allowMultiple": true,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón no deshabilitado</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón deshabilitado</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "disabled": true
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón deshabilitado y abierto</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "disabled": true,
      "open": true
    }
  ]
}) }}

Mostrar códigodel ejemplo: Deshabilitados con allowtoggle y allowmultiple

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "accordion-disabled",
  "headingLevel": 3,
  "allowToggle": true,
  "allowMultiple": true,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón no deshabilitado</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón deshabilitado</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "disabled": true
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón deshabilitado y abierto</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "disabled": true,
      "open": true
    }
  ]
}) }}

Con encabezado

Usa el parámetro 'heading' para añadir un encabezado asociado al componente. Usa el parámetro 'headingLevel' para establecer el nivel del encabezado. Por ejemplo: 'headingLevel': 3 creará un encabezado <h3>.

Ejemplo: "Con encabezado", de código HTML, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- accordion -->
<div class="c-accordion">
  <div class="flex justify-between">
    <h3 class="c-h2 mb-base">Encabezado de acordeón</h3>
  </div>
  <div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="heading-example-1-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="heading-example-1"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 1</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="heading-example-1"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="heading-example-2-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="heading-example-2"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 2</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="heading-example-2"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="heading-example-3-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="heading-example-3"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 3</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="heading-example-3"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /accordion -->

Ejemplo: "Con encabezado", de código Nunjucks, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "heading-example",
  "headingLevel": 3,
  "heading": {
    "text": "Encabezado de acordeón"
  },
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Encabezado de acordeón

Mostrar códigodel ejemplo: Con encabezado

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "heading-example",
  "headingLevel": 3,
  "heading": {
    "text": "Encabezado de acordeón"
  },
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Con encabezado de nivel 4

Usa el parámetro 'heading' para añadir un encabezado asociado al componente. Usa el parámetro 'headingLevel' para establecer el nivel del encabezado. En este ejemplo: 'headingLevel': 4 creará un encabezado de componente <h4> y los botones interiores tendrán los siguientes niveles de encabezado para conservar la jerarquía de encabezados correspondiente: en este caso <h5>.

Ejemplo: "Con encabezado de nivel 4", de código HTML, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- accordion -->
<div class="c-accordion">
  <div class="flex justify-between">
    <h4 class="c-h2 mb-base">Este encabezado con &lt;h4&gt;</h4>
  </div>
  <div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h5>
        <button
          id="accordion-heading-level-example-1-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="accordion-heading-level-example-1"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Este Item 1 con &lt;h5&gt;</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h5>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="accordion-heading-level-example-1"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h5>
        <button
          id="accordion-heading-level-example-2-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="accordion-heading-level-example-2"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Este Item 2 con &lt;h5&gt;</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h5>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="accordion-heading-level-example-2"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h5>
        <button
          id="accordion-heading-level-example-3-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="accordion-heading-level-example-3"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Este Item 3 con &lt;h5&gt;</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h5>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="accordion-heading-level-example-3"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /accordion -->

Ejemplo: "Con encabezado de nivel 4", de código Nunjucks, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "accordion-heading-level-example",
  "headingLevel": 4,
  "heading": {
    "text": "Este encabezado con <h4>"
  },
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Este Item 1 con <h5></span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Este Item 2 con <h5></span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Este Item 3 con <h5></span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Este encabezado con <h4>

Mostrar códigodel ejemplo: Con encabezado de nivel 4

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "accordion-heading-level-example",
  "headingLevel": 4,
  "heading": {
    "text": "Este encabezado con <h4>"
  },
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Este Item 1 con &lt;h5&gt;</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Este Item 2 con &lt;h5&gt;</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Este Item 3 con &lt;h5&gt;</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Con encabezado y controles de mostrar todo

Usa el parámetro 'showControl': true para mostrar un controlador que permite mostrar/ocultar todos los items de una vez.

Ejemplo: "Con encabezado y controles de mostrar todo", de código HTML, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- accordion -->
<div class="c-accordion" data-allow-multiple>
  <div class="flex justify-between">
    <h3 class="c-h2 mb-base">Encabezado de acordeón</h3>
    <button id="heading-and-show-controls-example" class="c-accordion__toggle-all ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus text-right" type="button">
      Mostrar todo
    </button>
  </div>
  <div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="heading-and-show-controls-example-1-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="heading-and-show-controls-example-1"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 1</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="heading-and-show-controls-example-1"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="heading-and-show-controls-example-2-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="heading-and-show-controls-example-2"
          aria-expanded="true">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 2</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show hidden">
              Mostrar
            </span>
            <span class="c-accordion__hide">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        id="heading-and-show-controls-example-2"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="heading-and-show-controls-example-3-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="heading-and-show-controls-example-3"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 3</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="heading-and-show-controls-example-3"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /accordion -->

Ejemplo: "Con encabezado y controles de mostrar todo", de código Nunjucks, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "heading-and-show-controls-example",
  "headingLevel": 3,
  "heading": {
    "text": "Encabezado de acordeón"
  },
  "showControl": true,
  "allowMultiple": true,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "open": true
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Encabezado de acordeón

Mostrar códigodel ejemplo: Con encabezado y controles de mostrar todo

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "heading-and-show-controls-example",
  "headingLevel": 3,
  "heading": {
    "text": "Encabezado de acordeón"
  },
  "showControl": true,
  "allowMultiple": true,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "open": true
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Mostrar todo u ocultar todo con javascript

Es necesario usar el parámetro 'showControl': true. Puedes usar con javascript la función global activateAllAccordion(element, show), para mostrar u ocultar todos los items, usando el idPrefix del acordeón, el parámetro show admite true o false, si le pasamos true se mostrarán todos los items expandidos, y si le pasamos false se mostrarán cerrados. Ej: Abre la consola del navegador y escribe activateAllAccordion('show-all-accordion-example-js', true) para mostrar todos los items expandidos.

Ejemplo: "Mostrar todo u ocultar todo con javascript", de código HTML, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- accordion -->
<div class="c-accordion" data-allow-multiple>
  <div class="flex justify-between">
    <h3 class="c-h2 mb-base">Encabezado de acordeón</h3>
    <button id="show-all-accordion-example-js" class="c-accordion__toggle-all ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus text-right" type="button">
      Mostrar todo
    </button>
  </div>
  <div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="show-all-accordion-example-js-1-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="show-all-accordion-example-js-1"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 1</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="show-all-accordion-example-js-1"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="show-all-accordion-example-js-2-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="show-all-accordion-example-js-2"
          aria-expanded="true">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 2</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show hidden">
              Mostrar
            </span>
            <span class="c-accordion__hide">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        id="show-all-accordion-example-js-2"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="show-all-accordion-example-js-3-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="show-all-accordion-example-js-3"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 3</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="show-all-accordion-example-js-3"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /accordion -->

Ejemplo: "Mostrar todo u ocultar todo con javascript", de código Nunjucks, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "show-all-accordion-example-js",
  "headingLevel": 3,
  "heading": {
    "text": "Encabezado de acordeón"
  },
  "showControl": true,
  "allowMultiple": true,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "open": true
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Encabezado de acordeón

Mostrar códigodel ejemplo: Mostrar todo u ocultar todo con javascript

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "show-all-accordion-example-js",
  "headingLevel": 3,
  "heading": {
    "text": "Encabezado de acordeón"
  },
  "showControl": true,
  "allowMultiple": true,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "open": true
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Con controles personalizados para mostrar/ocultar

Usa los parámetros 'show' y 'hide' para personalizar los controles que permiten abrir cada item. El último item de este ejemplo no muestra ningún controlador visible.

Ejemplo: "Con controles personalizados para mostrar/ocultar", de código HTML, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- accordion -->
<div class="c-accordion" data-allow-multiple>
  <div class="flex justify-between">
  </div>
  <div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="accordion-show-hide-1-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="accordion-show-hide-1"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 1</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Expandir detalles
            </span>
            <span class="c-accordion__hide hidden">
              Contraer
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="accordion-show-hide-1"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="accordion-show-hide-2-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="accordion-show-hide-2"
          aria-expanded="false">
          <span class="block pr-lg pointer-events-none">Item de acordeón 2</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
                <path d="M14 7a1 1 0 0 0-1-1H8.25A.25.25 0 0 1 8 5.75V1a1 1 0 0 0-2 0v4.75a.25.25 0 0 1-.25.25H1a1 1 0 0 0 0 2h4.75a.25.25 0 0 1 .25.25V13a1 1 0 0 0 2 0V8.25A.25.25 0 0 1 8.25 8H13a1 1 0 0 0 1-1Z" fill="currentColor" transform="scale(3.42857)" />
              </svg>
            </span>
            <span class="c-accordion__hide hidden">
              <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
                <path d="M13 8H1a1 1 0 0 1 0-2h12a1 1 0 0 1 0 2Z" fill="currentColor" transform="scale(3.42857)" />
              </svg>
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="accordion-show-hide-2"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="accordion-show-hide-3-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="accordion-show-hide-3"
          aria-expanded="false">
          <span class="block pr-lg pointer-events-none">Item de acordeón 3</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              <span class="c-link">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="-0.5 -0.5 16 16" xml:space="preserve" height="1.25em" width="1.25em">
                  <path d="M7.5 12.1875c-0.4375 0 -0.8125 -0.1875 -1.0625 -0.5L0.25 4.75c-0.375 -0.5 -0.3125 -1.25 0.1875 -1.625 0.5 -0.375 1.1875 -0.375 1.5625 0.125l5.375 6.125c0.0625 0.0625 0.125 0.0625 0.25 0l5.375 -6.125c0.4375 -0.5 1.125 -0.5625 1.625 -0.125s0.5625 1.125 0.125 1.625l-0.0625 0.0625 -6.125 6.9375c-0.25 0.25 -0.6875 0.4375 -1.0625 0.4375z" fill="currentColor" stroke-width="1"></path>
                </svg>
              </span>
            </span>
            <span class="c-accordion__hide hidden">
              <span class="c-link">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="-0.5 -0.5 16 16" xml:space="preserve" height="1.25em" width="1.25em">
                  <path d="M7.5625 2.8125c0.4375 0 0.8125 0.1875 1.0625 0.5l6.0625 6.875c0.4375 0.4375 0.375 1.1875 -0.0625 1.625s-1.1875 0.375 -1.625 -0.0625l-0.0625 -0.0625 -5.3125 -6c-0.0625 -0.0625 -0.125 -0.0625 -0.25 0l-5.3125 6c-0.4375 0.5 -1.125 0.5625 -1.625 0.125s-0.5625 -1.125 -0.125 -1.625l0.0625 -0.0625 6.0625 -6.875c0.3125 -0.25 0.6875 -0.4375 1.125 -0.4375z" fill="currentColor" stroke-width="1"></path>
                </svg></span>
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="accordion-show-hide-3"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="accordion-show-hide-4-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="accordion-show-hide-4"
          aria-expanded="false">
          Item de acordeón 4
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
            </span>
            <span class="c-accordion__hide hidden">
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="accordion-show-hide-4"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /accordion -->

Ejemplo: "Con controles personalizados para mostrar/ocultar", de código Nunjucks, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "accordion-show-hide",
  "headingLevel": 3,
  "allowMultiple": true,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "show": {
        "text": "Expandir detalles"
      },
      "hide": {
        "text": "Contraer"
      }
    },
    {
      "headerHtml": "<span class='block pr-lg pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "show": {
        "html": "<svg class='w-4 h-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M14 7a1 1 0 0 0-1-1H8.25A.25.25 0 0 1 8 5.75V1a1 1 0 0 0-2 0v4.75a.25.25 0 0 1-.25.25H1a1 1 0 0 0 0 2h4.75a.25.25 0 0 1 .25.25V13a1 1 0 0 0 2 0V8.25A.25.25 0 0 1 8.25 8H13a1 1 0 0 0 1-1Z' fill='currentColor' transform='scale(3.42857)'/></svg>"
      },
      "hide": {
        "html": "<svg class='w-4 h-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M13 8H1a1 1 0 0 1 0-2h12a1 1 0 0 1 0 2Z' fill='currentColor' transform='scale(3.42857)'/></svg>"
      }
    },
    {
      "headerHtml": "<span class='block pr-lg pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "show": {
        "html": "<span class='c-link'>\n              <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' viewBox='-0.5 -0.5 16 16' xml:space='preserve' height='1.25em' width='1.25em'><path d='M7.5 12.1875c-0.4375 0 -0.8125 -0.1875 -1.0625 -0.5L0.25 4.75c-0.375 -0.5 -0.3125 -1.25 0.1875 -1.625 0.5 -0.375 1.1875 -0.375 1.5625 0.125l5.375 6.125c0.0625 0.0625 0.125 0.0625 0.25 0l5.375 -6.125c0.4375 -0.5 1.125 -0.5625 1.625 -0.125s0.5625 1.125 0.125 1.625l-0.0625 0.0625 -6.125 6.9375c-0.25 0.25 -0.6875 0.4375 -1.0625 0.4375z' fill='currentColor' stroke-width='1'></path></svg>\n            </span>"
      },
      "hide": {
        "html": "<span class='c-link'>\n              <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' viewBox='-0.5 -0.5 16 16' xml:space='preserve' height='1.25em' width='1.25em'><path d='M7.5625 2.8125c0.4375 0 0.8125 0.1875 1.0625 0.5l6.0625 6.875c0.4375 0.4375 0.375 1.1875 -0.0625 1.625s-1.1875 0.375 -1.625 -0.0625l-0.0625 -0.0625 -5.3125 -6c-0.0625 -0.0625 -0.125 -0.0625 -0.25 0l-5.3125 6c-0.4375 0.5 -1.125 0.5625 -1.625 0.125s-0.5625 -1.125 -0.125 -1.625l0.0625 -0.0625 6.0625 -6.875c0.3125 -0.25 0.6875 -0.4375 1.125 -0.4375z' fill='currentColor' stroke-width='1'></path></svg></span>"
      }
    },
    {
      "headerHtml": "Item de acordeón 4",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "show": {
        "text": ""
      },
      "hide": {
        "text": ""
      }
    }
  ]
}) }}

Mostrar códigodel ejemplo: Con controles personalizados para mostrar/ocultar

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "accordion-show-hide",
  "headingLevel": 3,
  "allowMultiple": true,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "show": {
        "text": "Expandir detalles"
      },
      "hide": {
        "text": "Contraer"
      }
    },
    {
      "headerHtml": "<span class='block pr-lg pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "show": {
        "html": "<svg class='w-4 h-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M14 7a1 1 0 0 0-1-1H8.25A.25.25 0 0 1 8 5.75V1a1 1 0 0 0-2 0v4.75a.25.25 0 0 1-.25.25H1a1 1 0 0 0 0 2h4.75a.25.25 0 0 1 .25.25V13a1 1 0 0 0 2 0V8.25A.25.25 0 0 1 8.25 8H13a1 1 0 0 0 1-1Z' fill='currentColor' transform='scale(3.42857)'/></svg>"
      },
      "hide": {
        "html": "<svg class='w-4 h-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M13 8H1a1 1 0 0 1 0-2h12a1 1 0 0 1 0 2Z' fill='currentColor' transform='scale(3.42857)'/></svg>"
      }
    },
    {
      "headerHtml": "<span class='block pr-lg pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "show": {
        "html": "<span class='c-link'>\n              <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' viewBox='-0.5 -0.5 16 16' xml:space='preserve' height='1.25em' width='1.25em'><path d='M7.5 12.1875c-0.4375 0 -0.8125 -0.1875 -1.0625 -0.5L0.25 4.75c-0.375 -0.5 -0.3125 -1.25 0.1875 -1.625 0.5 -0.375 1.1875 -0.375 1.5625 0.125l5.375 6.125c0.0625 0.0625 0.125 0.0625 0.25 0l5.375 -6.125c0.4375 -0.5 1.125 -0.5625 1.625 -0.125s0.5625 1.125 0.125 1.625l-0.0625 0.0625 -6.125 6.9375c-0.25 0.25 -0.6875 0.4375 -1.0625 0.4375z' fill='currentColor' stroke-width='1'></path></svg>\n            </span>"
      },
      "hide": {
        "html": "<span class='c-link'>\n              <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' viewBox='-0.5 -0.5 16 16' xml:space='preserve' height='1.25em' width='1.25em'><path d='M7.5625 2.8125c0.4375 0 0.8125 0.1875 1.0625 0.5l6.0625 6.875c0.4375 0.4375 0.375 1.1875 -0.0625 1.625s-1.1875 0.375 -1.625 -0.0625l-0.0625 -0.0625 -5.3125 -6c-0.0625 -0.0625 -0.125 -0.0625 -0.25 0l-5.3125 6c-0.4375 0.5 -1.125 0.5625 -1.625 0.125s-0.5625 -1.125 -0.125 -1.625l0.0625 -0.0625 6.0625 -6.875c0.3125 -0.25 0.6875 -0.4375 1.125 -0.4375z' fill='currentColor' stroke-width='1'></path></svg></span>"
      }
    },
    {
      "headerHtml": "Item de acordeón 4",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "show": {
        "text": ""
      },
      "hide": {
        "text": ""
      }
    }
  ]
}) }}

Con html en las cabeceras de los items

Podemos añadir texto adicional bajo las cabeceras de los items. Para evitar problemas de eventos el el click, usamos la clase pointer-events-none en los subelementos.

Ejemplo: "Con html en las cabeceras de los items", de código HTML, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- accordion -->
<div class="c-accordion">
  <div class="flex justify-between">
  </div>
  <div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="accordion-example-pointer-events-none-1-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="accordion-example-pointer-events-none-1"
          aria-expanded="false">
          <span class="block pointer-events-none">Item de acordeón 1</span><span class="block pointer-events-none font-normal">El subelemento también recibe eventos</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="accordion-example-pointer-events-none-1"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="accordion-example-pointer-events-none-2-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="accordion-example-pointer-events-none-2"
          aria-expanded="false">
          <span class="block pointer-events-none">Item de acordeón 2</span><span class="block pointer-events-none font-normal">El subelemento también recibe eventos</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="accordion-example-pointer-events-none-2"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="accordion-example-pointer-events-none-3-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="accordion-example-pointer-events-none-3"
          aria-expanded="false">
          <span class="block pointer-events-none">Item de acordeón 3</span><span class="block pointer-events-none font-normal">El subelemento también recibe eventos</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="accordion-example-pointer-events-none-3"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /accordion -->

Ejemplo: "Con html en las cabeceras de los items", de código Nunjucks, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "accordion-example-pointer-events-none",
  "headingLevel": 3,
  "items": [
    {
      "headerHtml": "<span class='block pointer-events-none'>Item de acordeón 1</span><span class='block pointer-events-none font-normal'>El subelemento también recibe eventos</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pointer-events-none'>Item de acordeón 2</span><span class='block pointer-events-none font-normal'>El subelemento también recibe eventos</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pointer-events-none'>Item de acordeón 3</span><span class='block pointer-events-none font-normal'>El subelemento también recibe eventos</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Mostrar códigodel ejemplo: Con html en las cabeceras de los items

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "accordion-example-pointer-events-none",
  "headingLevel": 3,
  "items": [
    {
      "headerHtml": "<span class='block pointer-events-none'>Item de acordeón 1</span><span class='block pointer-events-none font-normal'>El subelemento también recibe eventos</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pointer-events-none'>Item de acordeón 2</span><span class='block pointer-events-none font-normal'>El subelemento también recibe eventos</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pointer-events-none'>Item de acordeón 3</span><span class='block pointer-events-none font-normal'>El subelemento también recibe eventos</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Con clases de css aplicadas

Los parámetros classes nos permiten aplicar clases de Tailwind CSS a nuestro componente.

Ejemplo: "Con clases de css aplicadas", de código HTML, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- accordion -->
<div class="c-accordion px-lg pt-base border-t border-b border-neutral-base">
  <div class="flex justify-between">
    <h3 class="c-h2 mb-lg uppercase">Accordion example</h3>
  </div>
  <div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="classes-example-1-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="classes-example-1"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 1</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="classes-example-1"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="classes-example-2-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="classes-example-2"
          aria-expanded="true">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 2</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show hidden">
              Mostrar
            </span>
            <span class="c-accordion__hide">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        id="classes-example-2"
        class="c-accordion__panel p-sm bg-primary-light">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-white rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="classes-example-3-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="classes-example-3"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 3</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="classes-example-3"
        class="c-accordion__panel">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /accordion -->

Ejemplo: "Con clases de css aplicadas", de código Nunjucks, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "classes-example",
  "headingLevel": 3,
  "classes": "px-lg pt-base border-t border-b border-neutral-base",
  "heading": {
    "text": "Accordion example",
    "classes": "c-h2 mb-lg uppercase"
  },
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-white rounded-lg h-40'></div></div>",
      "classes": "p-sm bg-primary-light",
      "open": true
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Accordion example

Mostrar códigodel ejemplo: Con clases de css aplicadas

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "classes-example",
  "headingLevel": 3,
  "classes": "px-lg pt-base border-t border-b border-neutral-base",
  "heading": {
    "text": "Accordion example",
    "classes": "c-h2 mb-lg uppercase"
  },
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-white rounded-lg h-40'></div></div>",
      "classes": "p-sm bg-primary-light",
      "open": true
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Con atributos aplicados

Los parámetros attributes nos permiten aplicar atributos de HTML a nuestro componente, como por ejemplo id o etiquetas ARIA como aria-label. Mira el código para ver los atributos aplicados.

Ejemplo: "Con atributos aplicados", de código HTML, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- accordion -->
<div class="c-accordion" id="accordion-test">
  <div class="flex justify-between">
  </div>
  <div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="attributes-example-1-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="attributes-example-1"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 1</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="attributes-example-1"
        class="c-accordion__panel" data-attr="accordion-item-test-a">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="attributes-example-2-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="attributes-example-2"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 2</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="attributes-example-2"
        class="c-accordion__panel" data-attr="accordion-item-test-b">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
      <h4>
        <button
          id="attributes-example-3-title"
          type="button"
          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="attributes-example-3"
          aria-expanded="false">
          <span class="block pr-2xl pointer-events-none">Item de acordeón 3</span>
          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
            <span class="c-accordion__show">
              Mostrar
            </span>
            <span class="c-accordion__hide hidden">
              Ocultar
            </span>
          </span>
        </button>
      </h4>
      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
      <div
        hidden=""
        id="attributes-example-3"
        class="c-accordion__panel" data-attr="accordion-item-test-c">
        <div class="w-48 p-2">
          <div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /accordion -->

Ejemplo: "Con atributos aplicados", de código Nunjucks, para maquetar el componente: "Accordion", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "attributes-example",
  "headingLevel": 3,
  "attributes": {
    "id": "accordion-test"
  },
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "attributes": {
        "data-attr": "accordion-item-test-a"
      }
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "attributes": {
        "data-attr": "accordion-item-test-b"
      }
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "attributes": {
        "data-attr": "accordion-item-test-c"
      }
    }
  ]
}) }}

Mostrar códigodel ejemplo: Con atributos aplicados

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}

{{ componentAccordion({
  "idPrefix": "attributes-example",
  "headingLevel": 3,
  "attributes": {
    "id": "accordion-test"
  },
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "attributes": {
        "data-attr": "accordion-item-test-a"
      }
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "attributes": {
        "data-attr": "accordion-item-test-b"
      }
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "attributes": {
        "data-attr": "accordion-item-test-c"
      }
    }
  ]
}) }}