Como fazer um accordion com HTML e CSS

Como fazer um accordion com HTML e CSS

Neste tutorial vamos criar um  accordion com html e css.

Nesta seção, projetaremos uma estrutura simples na tag <div>, <input>, <h1>, <label> , <p> e a tag <href> para inserir o link de destino. 

Essas são as tags que usaremos para criar o nosso accordion com html e CSS puro.

Vamos Adicionar o HTML

    <div class="accordion">
      
      <input type="checkbox" id="faq-1">
      <h1><label for="faq-1">O que é Html ?</label></h1>
      <div class="texto">
        
        <p>
            HTML é uma linguagem de marcação utilizada na construção de páginas na Web. Documentos HTML podem ser interpretados por navegadores. A tecnologia é fruto da junção entre os padrões HyTime e SGML. HyTime é um padrão para a representação estruturada de hipermídia e conteúdo baseado em tempo.
        </p>

      </div>
    
    </div>

    <div class="accordion">
    
      <input type="checkbox" id="faq-2">
      <h1><label for="faq-2">O que é Css ?</label></h1>
      <div class="texto">
        
        <p>
            Cascading Style Sheets é um mecanismo para adicionar estilos a uma página web, aplicado diretamente nas tags HTML ou ficar contido dentro das tags style. Também é possível, adicionar estilos adicionando um link para um arquivo CSS que contém os estilos.
        </p>

      </div>
    
    </div>

    <div class="accordion">
    
      <input type="checkbox" id="faq-3">
      <h1><label for="faq-3">Como aprender Html e Css ?</label></h1>
      <div class="texto">
        
        <p>
            Acompanhe o Blog <a href="https://www.loopnerd.com.br"><b>Loop Nerd</b> </a>.<br>
            Aprenda códigos html e css, artigos do básico ao mais avançado.
        </p>

      </div>
    
    </div>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso  accordion.

.accordion{
  
  max-width: 500px;
  margin: auto;
  position: relative;
  box-shadow: 1px 0px 1.2px 0px #e3e3e3;

}

.accordion input{

  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  opacity:0;
  visibility: 0;

}

.accordion h1{

  background:#007cff;
  color:white;
  font-size: 1em;
  padding: 0.8em 1em;
  position: relative;
  transition: 0.5s;

}

.accordion h1:hover { background-color:#0762c2; color:#eee003; }

.accordion label::before{

  content:"";
  display: inline-block;
  border: 8px solid transparent;
  border-left:12px solid white;

}

.accordion label{

  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;

}

.accordion div.texto{

  max-height:0px;
  overflow: hidden;
  transition:max-height 0.5s;
  background-color: white;
  box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.2);

}

.accordion div.texto p {

  padding:1em;
  position: relative;
  z-index: 1;

}

.accordion input:checked ~ h1 label::before{

  border-left:8px solid transparent;
  border-top:12px solid white;
  margin-top:12px;
  margin-right:10px;

}

.accordion input:checked ~ h1 ~ div.texto{ max-height:200px; }

.accordion a{ color:#007cff; }

Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando