desy-html

Accordion

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

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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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: 12.0.1, 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"
      }
    }
  ]
}) }}