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

    <details open name="web">
        <summary>¿Qué es HTML?</summary>
        <p>HTML (HyperText Markup Language) es el lenguaje estándar para crear páginas web.<br>
      Son las siglas de Lenguaje de Marcado de Hipertexto, el código estándar utilizado para crear y estructurar el contenido de una página web. <br>Se utiliza para definir la organización de elementos como texto, imágenes, videos y enlaces, y así indicar a los navegadores cómo mostrar la información en una página web. 
</p>
      <img src="https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg">
    </details>

    <details name="web">
        <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 name="web">
        <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>
body{
  background-color:#333;
 
}
h2{
   color:#eee;
}
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 p{
   padding:0 3rem;
   line-height:2rem;
}
details img{
  width: 200px;
  height: auto;
  margin: 1rem;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.