Collapse

.collapse muestra u oculta un bloque de contenido con un botón, con una transición de alto. Con varios paneles se arma un acordeón. Necesita ds-uikit.js.

El botón lleva data-ds-toggle="collapse", data-ds-target="#id" (el panel), aria-expanded y aria-controls="id".
El panel es un div.collapse con ese id. Cerrado lleva hidden.
No le pongas padding, borde ni margen vertical a .collapse: van en un elemento interno (una card, accordion__body…), así la transición no salta.

Básico

Tema

HTML
React

<p>
  <button type="button" class="btn btn--primary" data-ds-toggle="collapse" data-ds-target="#detalles" aria-expanded="false" aria-controls="detalles">Ver detalles</button>
</p>
<div class="collapse" id="detalles" hidden>
  <div class="card">
    <div class="card__body">
      Incluye diseño, desarrollo y puesta en marcha del sitio, con hosting y soporte durante tres meses.
    </div>
  </div>
</div>

export default function CollapseBasico() {
  return (
    <>
      <p>
        <button type="button" className="btn btn--primary" data-ds-toggle="collapse" data-ds-target="#detalles" aria-expanded="false" aria-controls="detalles">Ver detalles</button>
      </p>
      <div className="collapse" id="detalles" hidden>
        <div className="card">
          <div className="card__body">
            Incluye diseño, desarrollo y puesta en marcha del sitio, con hosting y soporte durante tres meses.
          </div>
        </div>
      </div>
    </>
  );
}

Abierto por defecto

Quita hidden del panel y pon aria-expanded="true" en el botón.

Tema

HTML
React

<p>
  <button type="button" class="btn btn--outline-primary" data-ds-toggle="collapse" data-ds-target="#requisitos" aria-expanded="true" aria-controls="requisitos">Requisitos</button>
</p>
<div class="collapse" id="requisitos">
  <div class="card">
    <div class="card__body">
      Necesitas un dominio propio y el logo de tu marca en formato vectorial (SVG o PDF).
    </div>
  </div>
</div>

export default function CollapseAbierto() {
  return (
    <>
      <p>
        <button type="button" className="btn btn--outline-primary" data-ds-toggle="collapse" data-ds-target="#requisitos" aria-expanded="true" aria-controls="requisitos">Requisitos</button>
      </p>
      <div className="collapse" id="requisitos">
        <div className="card">
          <div className="card__body">
            Necesitas un dominio propio y el logo de tu marca en formato vectorial (SVG o PDF).
          </div>
        </div>
      </div>
    </>
  );
}

Varios botones

Varios botones pueden controlar el mismo panel: al abrirlo o cerrarlo, el JS actualiza aria-expanded en todos. En un enlace, el destino puede ir en href="#id" (agrégale role="button"). Dentro del panel, data-ds-dismiss="collapse" lo cierra.

Tema

HTML
React

<p>
  <button type="button" class="btn btn--primary" data-ds-toggle="collapse" data-ds-target="#planes" aria-expanded="false" aria-controls="planes">Ver planes</button>
  <a class="btn btn--outline-primary" href="#planes" role="button" data-ds-toggle="collapse" aria-expanded="false" aria-controls="planes">Comparar planes</a>
</p>
<div class="collapse" id="planes" hidden>
  <div class="card">
    <div class="card__body">
      <p>Plan Básico: sitio de una página. Plan Pro: hasta diez páginas, blog y formulario de contacto.</p>
      <button type="button" class="btn btn--sm" data-ds-dismiss="collapse">Cerrar</button>
    </div>
  </div>
</div>

export default function CollapseVariosBotones() {
  return (
    <>
      <p>
        <button type="button" className="btn btn--primary" data-ds-toggle="collapse" data-ds-target="#planes" aria-expanded="false" aria-controls="planes">Ver planes</button>
        <a className="btn btn--outline-primary" href="#planes" role="button" data-ds-toggle="collapse" aria-expanded="false" aria-controls="planes">Comparar planes</a>
      </p>
      <div className="collapse" id="planes" hidden>
        <div className="card">
          <div className="card__body">
            <p>Plan Básico: sitio de una página. Plan Pro: hasta diez páginas, blog y formulario de contacto.</p>
            <button type="button" className="btn btn--sm" data-ds-dismiss="collapse">Cerrar</button>
          </div>
        </div>
      </div>
    </>
  );
}

Acordeón

.accordion agrupa secciones accordion__item. Cada una tiene un título accordion__header (h2…h6, según la página) con el botón accordion__button, y el panel .collapse con el contenido en accordion__body.

Con data-ds-parent="#id-del-acordeón" en los paneles, se abre uno a la vez: al abrir uno, se cierra el que estaba abierto.

Tema

HTML
React

<div class="accordion" id="preguntas">
  <div class="accordion__item">
    <h3 class="accordion__header">
      <button type="button" class="accordion__button" data-ds-toggle="collapse" data-ds-target="#pregunta-1" aria-expanded="true" aria-controls="pregunta-1">¿Cuánto demora un sitio web?</button>
    </h3>
    <div class="collapse" id="pregunta-1" data-ds-parent="#preguntas">
      <div class="accordion__body">
        Entre tres y seis semanas, según la cantidad de páginas y si el contenido ya está listo.
      </div>
    </div>
  </div>
  <div class="accordion__item">
    <h3 class="accordion__header">
      <button type="button" class="accordion__button" data-ds-toggle="collapse" data-ds-target="#pregunta-2" aria-expanded="false" aria-controls="pregunta-2">¿Puedo editar el contenido yo mismo?</button>
    </h3>
    <div class="collapse" id="pregunta-2" data-ds-parent="#preguntas" hidden>
      <div class="accordion__body">
        Sí. Te entregamos un administrador para cambiar textos, imágenes y entradas del blog.
      </div>
    </div>
  </div>
  <div class="accordion__item">
    <h3 class="accordion__header">
      <button type="button" class="accordion__button" data-ds-toggle="collapse" data-ds-target="#pregunta-3" aria-expanded="false" aria-controls="pregunta-3">¿Qué incluye el soporte?</button>
    </h3>
    <div class="collapse" id="pregunta-3" data-ds-parent="#preguntas" hidden>
      <div class="accordion__body">
        Actualizaciones, respaldos semanales y ayuda por correo en días hábiles.
      </div>
    </div>
  </div>
</div>

export default function CollapseAcordeon() {
  return (
    <div className="accordion" id="preguntas">
      <div className="accordion__item">
        <h3 className="accordion__header">
          <button type="button" className="accordion__button" data-ds-toggle="collapse" data-ds-target="#pregunta-1" aria-expanded="true" aria-controls="pregunta-1">¿Cuánto demora un sitio web?</button>
        </h3>
        <div className="collapse" id="pregunta-1" data-ds-parent="#preguntas">
          <div className="accordion__body">
            Entre tres y seis semanas, según la cantidad de páginas y si el contenido ya está listo.
          </div>
        </div>
      </div>
      <div className="accordion__item">
        <h3 className="accordion__header">
          <button type="button" className="accordion__button" data-ds-toggle="collapse" data-ds-target="#pregunta-2" aria-expanded="false" aria-controls="pregunta-2">¿Puedo editar el contenido yo mismo?</button>
        </h3>
        <div className="collapse" id="pregunta-2" data-ds-parent="#preguntas" hidden>
          <div className="accordion__body">
            Sí. Te entregamos un administrador para cambiar textos, imágenes y entradas del blog.
          </div>
        </div>
      </div>
      <div className="accordion__item">
        <h3 className="accordion__header">
          <button type="button" className="accordion__button" data-ds-toggle="collapse" data-ds-target="#pregunta-3" aria-expanded="false" aria-controls="pregunta-3">¿Qué incluye el soporte?</button>
        </h3>
        <div className="collapse" id="pregunta-3" data-ds-parent="#preguntas" hidden>
          <div className="accordion__body">
            Actualizaciones, respaldos semanales y ayuda por correo en días hábiles.
          </div>
        </div>
      </div>
    </div>
  );
}

Acordeón con varios abiertos

Sin data-ds-parent, cada sección se abre y se cierra por su cuenta.

Tema

HTML
React

<div class="accordion">
  <div class="accordion__item">
    <h3 class="accordion__header">
      <button type="button" class="accordion__button" data-ds-toggle="collapse" data-ds-target="#paso-1" aria-expanded="true" aria-controls="paso-1">1. Reunión inicial</button>
    </h3>
    <div class="collapse" id="paso-1">
      <div class="accordion__body">
        Conversamos sobre tu negocio, tus objetivos y los sitios que te gustan.
      </div>
    </div>
  </div>
  <div class="accordion__item">
    <h3 class="accordion__header">
      <button type="button" class="accordion__button" data-ds-toggle="collapse" data-ds-target="#paso-2" aria-expanded="true" aria-controls="paso-2">2. Diseño</button>
    </h3>
    <div class="collapse" id="paso-2">
      <div class="accordion__body">
        Preparamos la propuesta visual y la ajustamos contigo hasta aprobarla.
      </div>
    </div>
  </div>
  <div class="accordion__item">
    <h3 class="accordion__header">
      <button type="button" class="accordion__button" data-ds-toggle="collapse" data-ds-target="#paso-3" aria-expanded="false" aria-controls="paso-3">3. Desarrollo y publicación</button>
    </h3>
    <div class="collapse" id="paso-3" hidden>
      <div class="accordion__body">
        Construimos el sitio, lo probamos en distintos dispositivos y lo publicamos.
      </div>
    </div>
  </div>
</div>

export default function CollapseAcordeonVarios() {
  return (
    <div className="accordion">
      <div className="accordion__item">
        <h3 className="accordion__header">
          <button type="button" className="accordion__button" data-ds-toggle="collapse" data-ds-target="#paso-1" aria-expanded="true" aria-controls="paso-1">1. Reunión inicial</button>
        </h3>
        <div className="collapse" id="paso-1">
          <div className="accordion__body">
            Conversamos sobre tu negocio, tus objetivos y los sitios que te gustan.
          </div>
        </div>
      </div>
      <div className="accordion__item">
        <h3 className="accordion__header">
          <button type="button" className="accordion__button" data-ds-toggle="collapse" data-ds-target="#paso-2" aria-expanded="true" aria-controls="paso-2">2. Diseño</button>
        </h3>
        <div className="collapse" id="paso-2">
          <div className="accordion__body">
            Preparamos la propuesta visual y la ajustamos contigo hasta aprobarla.
          </div>
        </div>
      </div>
      <div className="accordion__item">
        <h3 className="accordion__header">
          <button type="button" className="accordion__button" data-ds-toggle="collapse" data-ds-target="#paso-3" aria-expanded="false" aria-controls="paso-3">3. Desarrollo y publicación</button>
        </h3>
        <div className="collapse" id="paso-3" hidden>
          <div className="accordion__body">
            Construimos el sitio, lo probamos en distintos dispositivos y lo publicamos.
          </div>
        </div>
      </div>
    </div>
  );
}

JavaScript

Se abre y se cierra con un clic en un botón con data-ds-toggle="collapse". Actualiza aria-expanded en todos los botones que apuntan al panel.
Transición: el alto pasa de 0 al del contenido (y al revés). Durante la transición el panel lleva is-opening o is-closing. Cerrado queda con hidden, sin quitarlo del DOM.
Acordeón: un panel con data-ds-parent cierra a los demás paneles abiertos del mismo contenedor.
Si el foco estaba dentro del panel al cerrarse, pasa al botón que lo controla.

Atributo	Qué hace
`data-ds-toggle="collapse"`	En el botón: abre o cierra el panel de `data-ds-target` (o de `href="#id"` en un enlace).
`data-ds-target="<selector>"`	Panel que controla el botón.
`data-ds-parent="<selector>"`	En el panel: contenedor del acordeón. Al abrirse, cierra a los demás paneles del mismo contenedor.
`data-ds-dismiss="collapse"`	Cierra el panel que contiene al elemento.

const detalles = dsUIKit.collapse('#detalles'); // .collapse o selector
detalles.open();
detalles.close();
detalles.toggle();
detalles.isOpen; // true o false

En React, los atributos funcionan igual. Para abrirlo desde código: collapse(ref.current).open() (con import { collapse } from './js/ds-uikit.esm.js').

Evento	Cuándo
`ds:open`	Antes de abrirse. Con `preventDefault()` se cancela.
`ds:opened`	Al terminar de abrirse.
`ds:close`	Antes de cerrarse. Cancelable.
`ds:closed`	Al terminar de cerrarse.

event.detail.trigger es el botón que lo abrió o cerró (en un acordeón, el que abrió otra sección), o null si fue por la API. Más detalles en JavaScript.

Accesibilidad

Sigue el patrón disclosure: aria-expanded indica si el panel está abierto y aria-controls apunta al panel. Usa un <button>; si es un enlace, agrégale role="button".
Teclado: Enter o Espacio abren y cierran. El contenido del panel sigue al botón en el orden de Tab.
En el acordeón, el botón va dentro de un título (h2…h6) del nivel que corresponda en la página, para que se pueda navegar por títulos.
Con pocas secciones (hasta unas seis), puedes agregar role="region" y aria-labelledby="<id del botón>" a cada panel para que se anuncie como zona de la página.
El contenido cerrado está oculto con hidden: no se lee ni se enfoca.
Con «reducir movimiento» activado, abre y cierra sin transición.

Clases

Clase	Uso
`collapse`	Panel. Lleva `hidden` mientras está cerrado.
`accordion`	Contenedor del acordeón (borde y fondo).
`accordion__item`	Sección.
`accordion__header`	Título de la sección (`h2`…`h6`).
`accordion__button`	Botón que abre y cierra la sección. Tiene una flecha que gira al abrir.
`accordion__body`	Contenido de la sección, dentro del `.collapse`.
`is-opening`, `is-closing`	Estados de la transición (los pone el JS).

Variables

Collapse

Variable	Valor por defecto	Uso
`--ds-collapse-transition-duration`	`var(--ds-duration-base)`	Duración de la transición de alto al abrir y cerrar.

Acordeón

Variable	Valor por defecto	Uso
`--ds-accordion-bg`	`var(--ds-color-surface)`	Fondo.
`--ds-accordion-color`	`var(--ds-color-text)`	Color del texto.
`--ds-accordion-border-color`	`var(--ds-color-border)`	Color del borde exterior y de los separadores.
`--ds-accordion-radius`	`var(--ds-radius-md)`
`--ds-accordion-padding-x`	`var(--ds-space-4)`	Espacio horizontal interno de botones y contenido.
`--ds-accordion-button-padding-y`	`var(--ds-space-4)`	Espacio vertical interno del botón.
`--ds-accordion-button-font-size`	`var(--ds-font-size-base)`
`--ds-accordion-button-font-weight`	`var(--ds-font-weight-semibold)`
`--ds-accordion-button-hover-bg`	`color-mix(in srgb, var(--ds-color-text) 4%, var(--ds-color-surface))`	Fondo del botón en hover.
`--ds-accordion-button-active-color`	`var(--ds-color-primary-hover)`	Color del botón de una sección abierta.
`--ds-accordion-button-active-bg`	`color-mix(in srgb, var(--ds-color-primary) 8%, var(--ds-color-surface))`	Fondo del botón de una sección abierta.
`--ds-accordion-icon-size`	`1rem`	Tamaño de la flecha.
`--ds-accordion-body-padding-y`	`var(--ds-space-4)`	Espacio vertical interno del contenido.
`--ds-accordion-focus-color`	`var(--ds-color-primary)`	Color del contorno de foco.
`--ds-accordion-transition-duration`	`var(--ds-duration-fast)`	Duración del cambio de color y del giro de la flecha.