details y summary: componente de divulgación

¿Qué son details y summary?

<details>
  <summary>What is HTML?</summary>
  <p>HTML (HyperText Markup Language) is the standard markup language
     used to create web pages.</p>
</details>

Cómo funciona

El atributo open

<details open>
  <summary>Installation instructions</summary>
  <ol>
    <li>Download the installer</li>
    <li>Run the installer</li>
    <li>Restart your computer</li>
  </ol>
</details>
<!-- open is a boolean attribute: presence = expanded -->
<!-- Remove it to start collapsed -->

Crear una sección de preguntas frecuentes

<h2>Frequently Asked Questions</h2>

<details>
  <summary>Is HTML5 a programming language?</summary>
  <p>No. HTML5 is a markup language that defines the structure and meaning
     of web content. Programming languages like JavaScript add logic and behavior.</p>
</details>

<details>
  <summary>Do I need to close void elements?</summary>
  <p>In HTML5, void elements like &lt;img&gt; and &lt;br&gt; do not require
     a closing slash. Both &lt;br&gt; and &lt;br /&gt; are valid.</p>
</details>

Aplicar estilos a details y summary

details {
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}

summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;   /* remove default triangle */
}

summary::before {
  content: '▶ ';      /* custom arrow */
}

details[open] > summary::before {
  content: '▼ ';      /* rotate when open */
}

Eliminar el triángulo predeterminado

/* Remove the default arrow: */
summary {
  list-style: none;
}

/* Firefox: */
summary::-webkit-details-marker {
  display: none;
}

/* Then add a custom indicator: */
summary::after {
  content: '+';
  float: right;
}
details[open] summary::after {
  content: '−';
}

Evento toggle

const details = document.querySelector('details');

details.addEventListener('toggle', () => {
  if (details.open) {
    console.log('Details opened');
    // Track analytics, load content, etc.
  } else {
    console.log('Details closed');
  }
});

Acordeón con details

/* Pure CSS accordion using details: */
/* Each item is a details element */
/* For exclusive open, use JavaScript: */

const allDetails = document.querySelectorAll('details');
allDetails.forEach(d => {
  d.addEventListener('toggle', () => {
    if (d.open) {
      allDetails.forEach(other => {
        if (other !== d) other.removeAttribute('open');
      });
    }
  });
});

Accesibilidad de details y summary

Atributo name para un acordeón exclusivo

<details name="faq">
  <summary>Question 1</summary>
  <p>Answer 1...</p>
</details>

<details name="faq">
  <summary>Question 2</summary>
  <p>Answer 2...</p>
</details>
<!-- details with the same name act as a group -->
<!-- Opening one closes the others automatically -->
<!-- Supported in Chrome 120+ and Firefox 130+ -->

Carga diferida de contenido con toggle

<details id="advanced">
  <summary>Load advanced settings...</summary>
  <div id="advanced-content">Loading...</div>
</details>

<script>
const d = document.getElementById('advanced');
d.addEventListener('toggle', async () => {
  if (d.open) {
    const res = await fetch('/api/settings');
    const html = await res.text();
    document.getElementById('advanced-content').innerHTML = html;
    d.removeEventListener('toggle', arguments.callee);
  }
}, { once: true });
</script>

Comprobación rápida

Recapitulación: detalles y resumen