Contraíble

Mostrar y ocultar

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

Collapsible

Mostrar parámetros

Parámetros Nunjucks del componente: "Collapsible"

              params:
- name: headerText
  type: string
  required: true
  description: If `headerHtml` is set, this is not required. Text to use within the header element (the visible part of the collapsible element). If `headerHtml` is provided, the `headerText` argument will be ignored.
- name: headerHtml
  type: string
  required: true
  description: If `headerText` is set, this is not required. HTML to use within the header element (the visible part of the collapsible 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 collapsible 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 collapsible element. If `html` is provided, the `text` argument will be ignored.
- name: id
  type: string
  required: false
  description: Id to add to the collapsible element. Not required, but recommended to improve the accessibility.
- name: open
  type: boolean
  required: false
  description: If true, collapsible element will be expanded.
- name: buttonClasses
  type: string
  required: false
  description: Classes to add to the button element.
- name: showClasses
  type: string
  required: false
  description: Classes to add to the show element.
- name: hideClasses
  type: string
  required: false
  description: Classes to add to the hide element.
- name: contentClasses
  type: string
  required: false
  description: Classes to add to the content element.
- name: classes
  type: string
  required: false
  description: Classes to add to the collapsible container element.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the collapsible container element.

Por defecto #

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Mostrar código

Contenido

Nunjucks macro

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

HTML

<!-- collapsible -->
<div class="-my-px py-sm border-t border-b border-neutral-base c-collapsible" data-expanded="true" data-module="c-collapsible">
  <button aria-expanded="false" id="collapsible-default-title" class="group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-controls="collapsible-default">Cabecera del collapsible
    <span class="c-collapsible__show 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="false">Mostrar</span>
    <span class="c-collapsible__hide 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">Ocultar</span>
  </button>
  <div aria-hidden="true" class="c-collapsible__content py-sm" id="collapsible-default">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>
<!-- /collapsible -->

Expandido #

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

Mostrar código

Contenido

Nunjucks macro

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

HTML

<!-- collapsible -->
<div class="-my-px py-sm border-t border-b border-neutral-base c-collapsible" data-expanded="false" data-module="c-collapsible">
  <button aria-expanded="false" id="collapsible-initially-expanded-title" class="group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-controls="collapsible-initially-expanded">Cabecera del collapsible
    <span class="c-collapsible__show 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="false">Mostrar</span>
    <span class="c-collapsible__hide 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">Ocultar</span>
  </button>
  <div aria-hidden="true" class="c-collapsible__content py-sm" id="collapsible-initially-expanded">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>
<!-- /collapsible -->

Expandido con javascript #

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

Mostrar código

Contenido

Nunjucks macro

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

HTML

<!-- collapsible -->
<div class="-my-px py-sm border-t border-b border-neutral-base c-collapsible" data-expanded="true" data-module="c-collapsible">
  <button aria-expanded="false" id="collapsible-expanded-title" class="group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-controls="collapsible-expanded">Cabecera del collapsible
    <span class="c-collapsible__show 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="false">Mostrar</span>
    <span class="c-collapsible__hide 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">Ocultar</span>
  </button>
  <div aria-hidden="true" class="c-collapsible__content py-sm" id="collapsible-expanded">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>
<!-- /collapsible -->

Con html #

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Mostrar código

Contenido

Nunjucks macro

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

HTML

<!-- collapsible -->
<div class="-my-px py-sm border-t border-b border-neutral-base c-collapsible" data-expanded="true" data-module="c-collapsible">
  <button aria-expanded="false" id="collapsible-html-title" class="group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-controls="collapsible-html">Cabecera del collapsible
    <span class="c-collapsible__show 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="false">Mostrar</span>
    <span class="c-collapsible__hide 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">Ocultar</span>
  </button>
  <div aria-hidden="true" class="c-collapsible__content py-sm" id="collapsible-html">
    <p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit, sed do eiusmod
      tempor <em>incididunt</em> ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in <strong>reprehenderit</strong> in voluptate velit esse
      cillum dolore eu fugiat nulla <em>pariatur</em>. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>
<!-- /collapsible -->

Con clases aplicadas #

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

Mostrar código

Contenido

Nunjucks macro

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

HTML

<!-- collapsible -->
<div class=" p-base bg-primary-light flex flex-wrap gap-base c-collapsible" data-expanded="true" data-module="c-collapsible">
  <button aria-expanded="false" id="collapsible-classes-title" class=" c-button self-start" aria-controls="collapsible-classes">Cabecera del collapsible
    <span class="c-collapsible__show  hidden!" aria-hidden="false">Mostrar</span>
    <span class="c-collapsible__hide  hidden!" aria-hidden="true">Ocultar</span>
  </button>
  <div aria-hidden="true" class="c-collapsible__content  flex-1 border border-neutral-base p-base bg-white rounded-sm" id="collapsible-classes">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>
<!-- /collapsible -->

Componentes Índice de páginas

Contraíble

Collapsible

Por defecto #

Descripción visual

Contenido

Nunjucks macro

HTML

Expandido #

Descripción visual

Contenido

Nunjucks macro

HTML

Expandido con javascript #

Descripción visual

Contenido

Nunjucks macro

HTML

Con html #

Descripción visual

Contenido

Nunjucks macro

HTML

Con clases aplicadas #

Descripción visual

Contenido

Nunjucks macro

HTML