Acordeón

Presenta tus ideas como un acordeón: revela capa a capa la información de forma dinámica. Con esta estructura, cautivarás a tu audiencia y les permitirás explorar de manera interactiva.

Nuestro acordeón

Si deseas mantener un elemento abierto por defecto, asegúrate de conservar la clase "active". Si prefieres que todos los elementos estén cerrados, simplemente elimina la clase "active" del código. Además, puedes personalizar el color de fondo de la cabecera del título reemplazando la clase "bg-gray-4" por la que desees, o incluso utilizando tu propia creación.

Item 0

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Item 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Item 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Item 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

HTML

                                    
  <div class="accordion border rounded" role="tablist">
    <div class="accordion-block active" role="tabpanel">
        <h3 class="accordion-header font-n grid space-hb" tabindex="0">Item 0 <svg class="ico-16 mt-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M23.245 4l-11.245 14.374-11.219-14.374-.781.619 12 15.381 12-15.391-.755-.609z"/></svg></h3>                                 
        <div class="accordion-body" role="tabpanel">
          <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
        </div>
    </div>
    <div class="accordion-block" role="tabpanel">
        <h3 class="accordion-header font-n grid space-hb" tabindex="0">Item 1 <svg class="ico-16 mt-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M23.245 4l-11.245 14.374-11.219-14.374-.781.619 12 15.381 12-15.391-.755-.609z"/></svg></h3>
        <div class="accordion-body" role="tabpanel">
          <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
        </div>
    </div>
    <div class="accordion-block" role="tabpanel">
        <h3 class="accordion-header font-n grid space-hb" tabindex="0">Item 2 <svg class="ico-16 mt-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M23.245 4l-11.245 14.374-11.219-14.374-.781.619 12 15.381 12-15.391-.755-.609z"/></svg></h3>
        <div class="accordion-body" role="tabpanel">
          <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
        </div>
    </div>
    <div class="accordion-block rounded-b" role="tabpanel">
        <h3 class="accordion-header font-n grid space-hb" tabindex="0">Item 3 <svg class="ico-16 mt-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M23.245 4l-11.245 14.374-11.219-14.374-.781.619 12 15.381 12-15.391-.755-.609z"/></svg></h3>
        <div class="accordion-body rounded-b" role="tabpanel">
          <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
        </div>
    </div>
  </div>