@govbr-ds/core/dist/components/accordion/examples/accordion-default.html

Padrão Digital de Governo

<div class="br-accordion" id="accordion1">
  <div class="item">
    <button class="header" type="button" aria-controls="id9"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Assuntos</span></button>
  </div>
  <div class="content" id="id9">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="item">
    <button class="header" type="button" aria-controls="id10"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Serviços</span></button>
  </div>
  <div class="content" id="id10">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="item">
    <button class="header" type="button" aria-controls="id11"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Canais de atendimento</span></button>
  </div>
  <div class="content" id="id11">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="item">
    <button class="header" type="button" aria-controls="id12"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Galeria de aplicativos</span></button>
  </div>
  <div class="content" id="id12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="item">
    <button class="header" type="button" aria-controls="id13"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Centrais de conteúdo</span></button>
  </div>
  <div class="content" id="id13">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="item">
    <button class="header" type="button" aria-controls="id14"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Navegação</span></button>
  </div>
  <div class="content" id="id14">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="item">
    <button class="header" type="button" aria-controls="id15"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Planalto</span></button>
  </div>
  <div class="content" id="id15">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>