Criando um menu Accordion (Grupo Recolhível) com HTML, CSS e JS

PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Websites e SEO

Um menu Accordion ou Grupo Recolhível, é aquele que aparece somente com os títulos dos grupos, e quando o usuário clica em algum item, o conteúdo relacionado é exibido logo abaixo.

Com base na minha experiência de anos trabalhando com websites, minha sugestão é sempre oferecer a melhor experiência para o usuário, que ajuda também na classificação em buscadores, e o grupo recolhível é um dos elementos que melhora a interação com textos longos e listas.

Existem várias formas de criar o Accordion, inclusive com bibliotecas prontas, mas vamos focar em fazer com HTML, CSS e JavaScript. Assim você terá um código mais leve e puro, deixando o site mais rápido.

Código HTML

Etapa 1 - Crie um arquivo HTML no seu editor favorito (Ex: Notepad++) com o seguinte código:

<button class="accordion">Seção 1</button>
<div class="painel">
  <p>Conteúdo...</p>
</div>

<button class="accordion">Seção 2</button>
<div class="painel">
  <p>Conteúdo...</p>
</div>

<button class="accordion">Seção 3</button>
<div class="painel">
  <p>Conteúdo...</p>
</div>

Código CSS

Etapa 2 - Você pode criar um arquivo CSS separado (melhor prática) e vincular com link ou adicionar junto com o HTML, o seguinte código:

<style>

/* Estilize os botões usados ​​para abrir e fechar o painel recolhível */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Adicione uma cor de fundo ao botão se ele receber clique (adicione a classe .active com JS) e quando você passar o mouse sobre ele (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Estilize o painel accordion. Nota: oculto por padrão */
.painel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

.accordion:after {
  content: '\02795'; /* Unicode (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode (-) */
}

</style>

As tags de abertura <style> e fechamento </style> só devem ser usadas caso coloque o código CSS junto com o código HTML no mesmo arquivo.

Código JavaScript (JS)

Etapa 3 - Você pode criar um arquivo JS separado (melhor prática) e vincular com script ou adicionar junto com o HTML, o seguinte código:

<script>

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Alternar entre adicionar e remover a classe "active", para destacar o botão que controla o painel */
    this.classList.toggle("active");
	
    /* Alternar entre ocultar e mostrar o painel ativo */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

</script>

As tags de abertura <script> e fechamento </script> só devem ser usadas caso coloque o código JavaScript junto com o código HTML no mesmo arquivo.