Como criar: conteúdo dobrável / acordeão

Aprenda a criar um acordeão (conteúdo dobrável).

Acordeão

O acordeão é muito útil quando você deseja alternar entre ocultar e mostrar grandes quantidades de conteúdo:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Experimente você mesmo

Criar acordeão

Primeiro passo - Adicionar HTML：

<button class="accordion">Seção 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">Seção 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">Seção 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

Segundo passo - Adicionar CSS：

Definir estilos do acordeão

/* Definir estilos para os botões que abrem e fecham o painel de acordeão */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
/* Se o botão for clicado (classe .active adicionada via JS), adicionar cor de fundo e ao passar o mouse sobre ele (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}
/* Adicionar estilos ao painel de acordeão. Atenção: o padrão é oculto */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

Terceiro passo - Adicionar JavaScript：

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 realçar os botões do painel de controle */
    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";
    }
  });
}

Experimente você mesmo

Acordeão animado (deslizar para baixo)

Para criar um acordeão animado, adicione a classe de painel: max-height: 0,overflow: hidden e max-height efeito de transição da propriedade.

então, use JavaScript para calcular e definir a altura do painel com base no tamanho da tela: max-heightpara alcançar o efeito de deslizar para baixo do conteúdo:

<style>
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}
</script>

Experimente você mesmo

Adicionar ícone

Adicionar um símbolo em cada botão para indicar se o conteúdo colapsável está aberto ou fechado:

.accordion:after {
  content: '\02795'; /* "Adição" (+) caractere Unicode */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* "Subtração" (−) caractere Unicode */
}

Experimente você mesmo