Como criar: Efeito de dobra

Aprender a criar partes dobráveis.

Efeito dobrável

Clique no botão para alternar entre mostrar e ocultar o conteúdo dobrável.

Alguns conteúdos dobráveis. Clique no botão para alternar entre mostrar e ocultar o conteúdo dobrável. 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 efeito dobrável

Primeiro passo - Adicionar HTML:

<button type="button" class="collapsible">Abrir Dobrável</button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>

Segundo passo - Adicionar CSS:

Definir estilo do acordeão:

/* Define o estilo do botão para abrir e fechar o conteúdo dobrável */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
/* Adiciona cor de fundo ao botão quando clicado e ao passar o mouse sobre ele (hover), usando JS para adicionar a classe .active */
.active, .collapsible:hover {
  background-color: #ccc;
}
/* Define o estilo do conteúdo dobrável. Atenção: oculto por padrão */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

Terceiro passo - Adicionar JavaScript:

var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

Experimente você mesmo

efeito de colapso animado (deslizar para baixo)

efeito de colapso animado (deslizar para baixo) Para criar um efeito de colapso animado, adicionemax-height: 0, overflow: hide max-height e

Então, use JavaScript para adicionar ao painel a classe com a transição calculada. max-height Deslize o conteúdo para baixo, dependendo da altura do painel em diferentes tamanhos de tela:

Exemplo

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

Experimente você mesmo

Adicionar ícone

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

Exemplo

.collapsible:after {
  content: '\02795'; /* Representa o caractere Unicode "mais" (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* Representa o caractere Unicode "menos" (-) */
}

Experimente você mesmo