wrapper com css

index.html

<div class="wrapper">
  <h1>Perguntas Frequentes</h1>
 
 <div class="lista-item">
   <input type="checkbox" class="trigger-input" id="faq-titulo-1">
   <div class="trigger-wrapper">
      <label for="faq-titulo-1">
        <h2 class="faq-titulo">Cetificados de Conclusão</h2>
        <p class="faq-conteudo">Todos os cursos possuem certificado de conclusão. Ao conpletar todas as aulas um ceritificado é gerado no seu nome. Certificado válido em todo o território nacional com Base na lei do Curso Livre.</p>
     </label>
   </div>
 </div>
  
   <div class="lista-item">
   <input type="checkbox" class="trigger-input" id="faq-titulo-2">
   <div class="trigger-wrapper">
      <label for="faq-titulo-2">
        <h2 class="faq-titulo">Porque um Lobo</h2>
        <p class="faq-conteudo">Todos os cursos possuem certificado de conclusão. Ao conpletar todas as aulas um ceritificado é gerado no seu nome. Certificado válido em todo o território nacional com Base na lei do Curso Livre.</p>
     </label>
   </div>
 </div>
  
   <div class="lista-item">
   <input type="checkbox" class="trigger-input" id="faq-titulo-3">
   <div class="trigger-wrapper">
      <label for="faq-titulo-3">
        <h2 class="faq-titulo">Existe limite de acesso?</h2>
        <p class="faq-conteudo">Todos os cursos possuem certificado de conclusão. Ao conpletar todas as aulas um ceritificado é gerado no seu nome. Certificado válido em todo o território nacional com Base na lei do Curso Livre.</p>
     </label>
   </div>
 </div>

</div>

style.css

body{
  background-color:#f6f9fc;
}

.wrapper{
  max-width:400px;
  margin:0 auto;
}

h1{
  text-align:center;
  margin: 60px 0 40px 0;
  font-size:1.5em;
  color: #687C93;
  font-family: sans-serif;
  text-transform:uppercase;
}

.lista-item{
  background:white;
  border-radius:4px;
  padding:10px;
  margin-bottom:10px;
  box-shadow: 0 2px 6px rgba(50,50,50,.1)
}

.faq-titulo{
  cursor:pointer;
  padding:0 10px;
  font-size:1.4em;
  font-family:monospace;
  color: #8F6ED5;
}

.faq-titulo::before{
  content: '';
  display:inline-block;
  height:12px;
  width:24px;
  margin-right:10px;
  background: #B680F4;
}

.faq-titulo::after{
  content:'+';
  float: right;
  transition: transform .3s ease;
  
}  


.faq-conteudo{
  padding:10px;
  color: #687C93;
  font-family:sans-serif;
  font-size:.875em;
  line-height:1.4em;
  display:none;
}

.trigger-input{
  display:none;
}

.trigger-input:checked + .trigger-wrapper .faq-titulo::after{
  transform: rotate(45deg) scale(1.08);
}

.trigger-input:checked + .trigger-wrapper .faq-conteudo{
  display:block;
}

wrapper-com-css.markdown

wrapper com css

A Pen by Jefferson Buss Taborda on CodePen.

License.