Blog do MX Cursos

Criando Accordion com CSS3

Criando Accordion com CSS3
Avaliar post

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.

Dica do redator: Quer se especializar ou potencializar suas habilidades em HTML5, CSS3, Javascript, jQuery, Bootstrap, entre outros? Conheça todos nossos Cursos Online de Desenvolvimento Front-End em Vídeo Aulas.

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.

David CHC

David CHC

Trabalha com desenvolvimento web há 10 anos, atuou como programador líder do MX Cursos por mais de 8 anos e hoje dedica-se exclusivamente à criação de cursos para a plataforma. Possui vasto conhecimento em PHP, Javascript, HTML5, CSS3, Gulp.js, GIT, MySQL

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

Your Header Sidebar area is currently empty. Hurry up and add some widgets.