<h2>Acordeón con &lt;details&gt; y &lt;summary&gt;</h2>

    <details open>
        <summary>¿Qué es HTML?</summary>
        <p>HTML (HyperText Markup Language) es el lenguaje estándar para crear páginas web.</p>
    </details>

    <details>
        <summary>¿Qué es CSS?</summary>
        <p>CSS (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de un documento HTML.</p>
    </details>

    <details>
        <summary>¿Qué es JavaScript?</summary>
        <p>JavaScript es un lenguaje de programación utilizado para crear contenido dinámico en páginas web.</p>
    </details>
summary {
  font-size: 1.2rem;
  font-weight: bold;
  padding: 0.75rem;
  cursor: pointer;
  margin: 0.25rem;
  background-color: #007bff;
  color: white;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  text-align: center;
}
details {
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
  text-align: center;
}     
details[open] {
border-left: 3px solid #3498db;
}
summary::marker {
color: red;
font-size: 1.5rem;
}
/* Flecha en contenido desplegado */
details[open] summary::marker {
content: "↕ ";
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.