Collapse

Veja como utilizar

Acrescentar um data-collapse="group" no elemento pai, um data-collapse="item" no título e data-collapse="content" no próximo elemento de cada item. As classes podem ter qualquer nome e serem estilizadas livremente.

Para deixar um item ativo ao abrir a página, deve-se adicionar a classe active nos elementos que possuem data-collapse="item" e também data-collapse="content".

Escreva aqui o título01: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque deserunt fugit dicta quos, reprehenderit nulla minus, quae esse, voluptatibus nisi veniam repellendus. Explicabo unde ratione cum, repellat sed porro rem!
Escreva aqui o título02: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque eveniet cupiditate odit. Aliquam eos ad quas, totam, facilis explicabo nostrum hic necessitatibus suscipit fugit sapiente incidunt minus quia eum eius!
Escreva aqui o título03: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi optio vitae, corrupti deleniti necessitatibus voluptas possimus placeat accusantium iusto doloremque explicabo provident illum est ratione quasi distinctio. Ratione, excepturi alias.
Escreva aqui o título04: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora eveniet neque voluptates, incidunt ut, magnam voluptate non minima modi esse nostrum inventore laboriosam commodi ab dolor voluptatum architecto earum similique?Natus iste minus, quidem accusantium odit dicta ipsum debitis accusamus ut consequatur deserunt adipisci aliquid reiciendis repellendus voluptatibus quis rerum, soluta dolore. Autem nesciunt explicabo itaque consectetur, perspiciatis repellat nulla?Sit earum, voluptate itaque explicabo quam labore commodi rerum incidunt fugiat placeat laudantium. Animi repudiandae nulla velit perferendis adipisci voluptatem illo ipsa culpa corporis reprehenderit cum tenetur, aspernatur, veritatis officiis.

HTML Exemplo

 <section class="collapse" data-collapse="group">
   <h3 class="collapse__title active" data-collapse="item">Escreva aqui o título01</h3>
   <p class="collapse__content active" data-collapse="content">Texto01</p>
   <h3 class="collapse__title" data-collapse="item">Escreva aqui o título02</h3>
   <div class="collapse__content" data-collapse="content">
     <p>Texto02</p>
     <p>Texto03</p>
   </div>
 </section>