Accordion
Mostrar parámetros
Parámetros del componente
params:
- name: idPrefix
type: string
required: true
description: String to prefix id for each accordion item if no id is specified on each item.
- name: headingLevel
type: number
required: false
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.
- name: allowToggle
type: boolean
required: false
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.
- name: allowMultiple
type: boolean
required: false
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.
- name: heading
type: object
required: false
description: Options for the heading
params:
- name: text
type: string
required: true
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.
- name: html
type: string
required: true
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.
- name: classes
type: string
required: false
description: Classes to add to the heading.
- name: id
type: string
required: false
description: Id to add to the button to show or hide all elements. Not required, but recommended to improve the accessibility.
- name: showControl
type: boolean
required: false
description: Defaults to `false`. If `true` a Show/Hide all button is displayed on top
- name: items
type: array
required: true
description: Array of accordion items objects.
params:
- name: headerText
type: string
required: true
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.
- name: headerHtml
type: string
required: true
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.
- name: text
type: string
required: true
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.
- name: html
type: string
required: true
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.
- name: id
type: string
required: false
description: Id to add to the item. Not required, but recommended to improve the accessibility.
- name: open
type: boolean
required: false
description: If true, accordion item will be expanded.
- name: disabled
type: boolean
required: false
description: If true, accordion item will be disabled and will not show the show/hide control.
- name: show
type: object
required: false
description: Options to customize the show info
params:
- name: text
type: string
required: true
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.
- name: html
type: string
required: true
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.
- name: classes
type: string
required: false
description: Classes to add to the show info.
- name: hide
type: object
required: false
description: Options to customize the hide info
params:
- name: text
type: string
required: true
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.
- name: html
type: string
required: true
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.
- name: classes
type: string
required: false
description: Classes to add to the hide info.
- name: classes
type: string
required: false
description: Classes to add to the accordion item element.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the accordion item.
- name: classes
type: string
required: false
description: Classes to add to the accordion container.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the accordion container.
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.
Mostrar códigodel ejemplo: Por defecto
Contenido
Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}
{{ componentAccordion({
"idPrefix": "accordion-example",
"headingLevel": 3,
"items": [
{
"headerText": "Item de acordeón 1",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>"
},
{
"headerText": "Item de acordeón 2",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>"
},
{
"headerText": "Item de acordeón 3",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>"
}
]
}) }}
HTML
<!-- 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">
Item de acordeón 1
<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">
Item de acordeón 2
<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">
Item de acordeón 3
<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 -->
Permite múltiples #
Permite tener abiertos varios items a la vez sin cerrar automáticamente ninguno. Define allowmultiple: true
y asume que allowToggle: true
.
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": [
{
"headerText": "Item de acordeón 1",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>"
},
{
"headerText": "Item de acordeón 2",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>"
},
{
"headerText": "Item de acordeón 3",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>"
}
]
}) }}
HTML
<!-- 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">
Item de acordeón 1
<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">
Item de acordeón 2
<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">
Item de acordeón 3
<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 -->
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
.
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": [
{
"headerText": "Item de acordeón 1",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>"
},
{
"headerText": "Item de acordeón 2",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>"
},
{
"headerText": "Item de acordeón 3",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>"
}
]
}) }}
HTML
<!-- 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">
Item de acordeón 1
<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">
Item de acordeón 2
<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">
Item de acordeón 3
<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 -->
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.
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": [
{
"headerText": "Item de acordeón 1",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>"
},
{
"headerText": "Item de acordeón 2",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>",
"open": true
},
{
"headerText": "Item de acordeón 3",
"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"
}
}) }}
HTML
<!-- 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">
Item de acordeón 1
<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">
Item de acordeón 2
<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">
Item de acordeón 3
<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 -->
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"])
.
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": [
{
"headerText": "Item de acordeón 1",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>",
"open": true
},
{
"headerText": "Item de acordeón 2",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>"
},
{
"headerText": "Item de acordeón 3",
"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"
}
}) }}
HTML
<!-- 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">
Item de acordeón 1
<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">
Item de acordeón 2
<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">
Item de acordeón 3
<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 -->
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
.
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": [
{
"headerText": "Item de acordeón no deshabilitado",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>"
},
{
"headerText": "Item de acordeón deshabilitado",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>",
"disabled": true
},
{
"headerText": "Item de acordeón deshabilitado y abierto",
"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
}
]
}) }}
HTML
<!-- 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">
Item de acordeón no deshabilitado
<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>
Item de acordeón deshabilitado
<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>
Item de acordeón deshabilitado y abierto
<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 -->
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>
.
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": [
{
"headerText": "Item de acordeón 1",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>"
},
{
"headerText": "Item de acordeón 2",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>"
},
{
"headerText": "Item de acordeón 3",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>"
}
]
}) }}
HTML
<!-- 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">
Item de acordeón 1
<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">
Item de acordeón 2
<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">
Item de acordeón 3
<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 -->
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>
.
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": [
{
"headerText": "Este Item 1 con <h5>",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>"
},
{
"headerText": "Este Item 2 con <h5>",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>"
},
{
"headerText": "Este Item 3 con <h5>",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>"
}
]
}) }}
HTML
<!-- accordion -->
<div class="c-accordion">
<div class="flex justify-between">
<h4 class="c-h2 mb-base">Este encabezado con <h4></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">
Este Item 1 con <h5>
<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">
Este Item 2 con <h5>
<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">
Este Item 3 con <h5>
<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 -->
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.
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": [
{
"headerText": "Item de acordeón 1",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>"
},
{
"headerText": "Item de acordeón 2",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>",
"open": true
},
{
"headerText": "Item de acordeón 3",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>"
}
]
}) }}
HTML
<!-- 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">
Item de acordeón 1
<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">
Item de acordeón 2
<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">
Item de acordeón 3
<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 -->
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.
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": [
{
"headerText": "Item de acordeón 1",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>"
},
{
"headerText": "Item de acordeón 2",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>",
"open": true
},
{
"headerText": "Item de acordeón 3",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>"
}
]
}) }}
HTML
<!-- 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">
Item de acordeón 1
<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">
Item de acordeón 2
<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">
Item de acordeón 3
<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 -->
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.
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": [
{
"headerText": "Item de acordeón 1",
"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"
}
},
{
"headerText": "Item de acordeón 2",
"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>"
}
},
{
"headerText": "Item de acordeón 3",
"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": ""
}
}
]
}) }}
HTML
<!-- 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">
Item de acordeón 1
<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">
Item de acordeón 2
<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">
Item de acordeón 3
<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-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 -->
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.
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>"
}
]
}) }}
HTML
<!-- 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 -->
Con clases de css aplicadas #
Los parámetros classes
nos permiten aplicar clases de Tailwind CSS a nuestro componente.
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": [
{
"headerText": "Item de acordeón 1",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>"
},
{
"headerText": "Item de acordeón 2",
"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
},
{
"headerText": "Item de acordeón 3",
"html": "<div class=\"w-48 p-2\"><div class=\"border-4 border-dashed border-neutral-light rounded-lg h-40\"></div></div>"
}
]
}) }}
HTML
<!-- 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">
Item de acordeón 1
<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">
Item de acordeón 2
<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">
Item de acordeón 3
<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 -->
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.
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": [
{
"headerText": "Item de acordeón 1",
"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"
}
},
{
"headerText": "Item de acordeón 2",
"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"
}
},
{
"headerText": "Item de acordeón 3",
"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"
}
}
]
}) }}
HTML
<!-- 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">
Item de acordeón 1
<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">
Item de acordeón 2
<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">
Item de acordeón 3
<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 -->