MX Cursos

Criando Accordion com CSS3

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.

Accordion com CSS3Vamos 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.

Nossos cursos online relacionados a este post

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.

Você pode conferir o efeito final acessando o link abaixo:

https://blog.mxcursos.com/exemplos/accordion-css3

Baixe os arquivos usados neste tutorial.

https://github.com/davidchc/tutorial-efeito-accordion-css3

Gostou do artigo? Compartilhe com seus amigos.

Um abraço e até a próxima.

Clube de Cursos Clube de Cursos

Conheça nosso Clube de Cursos e potencialize suas habilidades em Produção e Edição de Vídeos, Design, Marketing Digital, Programaço, WordPress, 3D e Modelagem, Motion Graphics e muito mais!

CONHEÇA O CLUBE