ACSSPB

Accordion CSS3 para Blogger(10/09/2014)

by Mairink Oemes

HTML

<div class="accordion">
    <input type="checkbox">
    <label>Título</label>
    <div>Conteúdo</div>
    <input type="checkbox">
    <label>Título</label>
    <div>Conteúdo</div>
    <input type="checkbox">
    <label>Título</label>
    <div>Conteúdo</div>
    <input type="checkbox">
    <label>Título</label>
    <div>Conteúdo</div>
</div>

CSS

.accordion {
  position:relative;
  background-color:LightBlue;
border-radius: 5px;
    }

.accordion > input {
  display:block;
  margin:0 0;
  width:100%;
  height:30px;
  position:relative;
  cursor:pointer;
  opacity:0;
  filter:alpha(opacity=0);
}

.accordion > label {
  display:block;
  font:normal bold 12px/30px 'Lato',sans-serif;
  background-color:#358DB6;
   border-radius: 5px;
  color:white;
  margin:-30px 0 0 0;
  padding:0 15px;
}

.accordion > div {
  padding:10px 15px;
  display:none;
}

.accordion > input:checked + label {
  background-color:#00688B;
border-radius: 5px;
    }

.accordion > input:checked + label + div {
  display:block;
}