Y un día te enteras de …
Se ha estado leyendo en los últimos días sobre html y css, es agradable los avances significativos que se ha tenido en ellos, ya que por dar un ejemplo para la creación clásica de un acordeón debería de usarse html, css y javascript, no es que este invalidado esa combinación para su uso.
Sino que la existencia de las etiquetas details y summary de html ahorran un buen de tiempo y ya con el css se le da la mascará que uno desee y de cierta manera hasta los efectos dejo al calce un código fuente donde se usa un css para hacer un acordeón donde se tiene un div como contenedor y tres opciones donde se hace uso a las etiquetas antes mencionadas y el css que le da un aspecto más vistoso.
A continuación se muestra el código css
<style>
.acordeon{
background: #576beb;
color: #FFFFFF;
font-size: 12px;
}
details{
cursor: pointer;
background: #7686f0;
padding: .5rem;
border-radius: 6px;
margin: .5rem;
}
summary{
list-style: none; }
summary::before{
content: '∧';
padding-right: 1rem;
}
details[open] summary::before{
content: '∨';
}
details { position: relative; }
details summary::before{
position: absolute;
font-size: .85rem;
top: 10px;
right: 12px;
</style>
Seguidamente se deja el código html
<div class='acordeon'>
<details>
<summary>Título uno</summary>
<div>
<p> Descripción del título uno </p>
</div>
</details>
<details>
<summary> Título dos </summary>
<div>
<p> Descripción del título dos </p>
</div>
</details>
<details>
<summary> Título tres </summary>
<div>
<p> Descripción del título tres </p>
</div>
</details>
</div>