Blog do 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 indicados

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.

QUER POTENCIALIZAR SUAS HABILIDADES EM SOFTWARES E SEGMENTOS DO PRESENTE E DO FUTURO?

CURSOS ONLINE