Criando Accordion com CSS3

Quando se pensa em criar efeitos de interação, pensamos em recorrer ao javascript. Na tríade, HTML (marcação), CSS (estilo) e Javascript (Comportamento), é natural pensarmos no Javascript.

Mas é possível ter esses mesmos efeitos utilizando apenas o CSS3.

Nesse tutorial, mostrarei como criar um efeito accordion (sanfona), utilizando apenas o HTML e CSS3.

Vamos começar

Criaremos o arquivo index.html e definir a nossa estrutura.

<!doctype html>
<html lang="pt-br">
<head>
	<meta charset="UTF-8">
	<title>Accordion com CSS3</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>	
	<div class="accordions"> 
          <div class="accordion-item">
              <input type="radio" name="accordion" checked="checked" id="accordion-1" />
              <label for= "accordion-1">Empresa</label>
              <div class="accordion-content">Minha Empresa</div>
          </div> 
          <div class="accordion-item">
              <input type="radio" name="accordion" id="accordion-2" />
              <label for= "accordion-2">Serviços</label>
              <div class="accordion-content">Meus Serviços</div>
          </div> 
          <div class="accordion-item">
              <input type="radio" name="accordion" id="accordion-3" />
              <label for= "accordion-3">Contatos</label>
              <div class="accordion-content">Meus Contatos</div>
          </div>
      </div>	
</body>
</html>

Explicando o código acima:

Na linha 6, chamamos o arquivo style.css que irá conter o estilo da nossa página, incluído a configuração do efeito;
Na linha 9 é um wrapper que irá conter todos itens do accordion;
Na linha 10, 15, 20 são os elementos que irão agrupar cada item da aba;
Na linha 11, 16, 21, são elementos de input do tipo radio;
Na linha 12, 17, 22 são elementos de label, que são associados aos input, pelo atributo for;
Na linha 13, 18, 23, são elementos que irão conter o conteúdo a ser exibido.

A lógica aplicada para criação do efeito é verificar o elemento do input do tipo rádio que está marcado e mostrar o conteúdo que está precedido dele.

Veremos dois tipos de seletores:

[atributo ^=valor] => Esse seletor informa que deseja selecionar qualquer atributo que comece com determinado valor.

Elemento1 ~ Elemento2 => Esse seletor informa que quero selecionar qualquer Elemento2 que esteja precedido do Elemento1.

Agora vamos criar o arquivo style.css:

.accordions{
    width:600px;
    margin:0 auto;
    border:1px solid #ccc;
}
.accordion-item input{
	display:none;
}
.accordion-item label{
    display:block;
    border:1px solid #ccc;
    background:#e5e5e5;
    cursor:pointer;
	padding:5px 3px;
}
.accordion-content{
    height: 0px;
    overflow: hidden;
    -webkit-transition: height 0.3s ease-in-out;
    -moz-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;
    -ms-transition: height 0.3s ease-in-out;
    transition: height 0.3s ease-in-out;
 }
[id^=accordion]:checked ~ .accordion-content {
    height: 100px;
}

Explicando o código acima:

Na linha 1 a 5, configuramos o container dos elementos do accordion;
- Definimos uma largura;
- Centralizamos na horizontal;
- Adicionamos uma borda;
Na linha 6 a 8, ocultamos o elemento input;
Na linha 9 a 15, configuramos o label que será “clicável”;
- Renderizamos o elemento em bloco;
- Adicionamos uma borda;
- Definimos uma cor de fundo;
- Definimos o ponteiro do cursor como algo “clicável”;
- Adicionamos um padding para um espaçamento interno.
Na linha 16 a 24, configuramos o elemento que engloba o conteúdo;
- Definimos a altura como “0” para ser aplicado o efeito;
- O overflow:hidden não mostra o último item;
- O transition define o tipo de efeito que queremos:
  - height: define a propriedade que terá a transição;
  - 0.3s => define o tempo desta transição;
  - ease-in-out => define como será o comportamento desta transição.
Na linha 25 a 27, selecionamos o elemento que está precedente e que seja do tipo atributo checked, sendo que o ID inicia o accordion. E assim definimos uma altura, mostrando o conteúdo.