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>