Accordion

Veja como utilizar

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

Escreva aqui o título01: Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quis quidem temporibus veroitaque.
Escreva aqui o título02: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe veniam, quidem laboriosam aspernatu autem amet reprehenderit? Tempora dolore sed laboriosam similique reprehenderit, sint harum voluptatibus.
Escreva aqui o título03: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Labore expedita fuga incidunt non mollitia corrupti perspiciatis quibusdam quos tempora magni. In est pariatur quibusdam suscipit nemo nam rem facere. Dolorem?
Escreva aqui o título04: Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quis quidem temporibus vero itaque.

HTML Exemplo

 <section class="accordion" data-accordion="group">
   <h2 class="accordion__title" data-accordion="item">Escreva aqui o título</h2>
   <p class="accordion__content" data-accordion="content">Escrava aqui o conteúdo</p>
   <h2 class="accordion__title" data-accordion="item">Escreva aqui o título2</h2>
   <div class="accordion__content" data-accordion="content">
     <p>Escreva o texto aqui</p>
     <p>Escreva o texto</p>
   </div>
 </section>