CSS3 Accordion

Kerangka dasar untuk menciptakan elemen akordion dan panel toggle hanya dengan CSS:

HTML

<div class="accordion">
    <input type="checkbox">
    <label>Lorem Ipsum</label>
    <div>Content...</div>
    <input type="checkbox">
    <label>Lorem Ipsum</label>
    <div>Content...</div>
    <input type="checkbox">
    <label>Lorem Ipsum</label>
    <div>Content...</div>
    <input type="checkbox">
    <label>Lorem Ipsum</label>
    <div>Content...</div>
</div>

<div class="accordion">
    <input type="radio" name="a" checked="true">
    <label>Lorem Ipsum</label>
    <div>Content...</div>
    <input type="radio" name="a">
    <label>Lorem Ipsum</label>
    <div>Content...</div>
    <input type="radio" name="a">
    <label>Lorem Ipsum</label>
    <div>Content...</div>
    <input type="radio" name="a">
    <label>Lorem Ipsum</label>
    <div>Content...</div>
</div>

CSS

.accordion {
  position:relative;
  background-color:white;
}

.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 Arial,Sans-Serif;
  background-color:black;
  color:white;
  margin:-30px 0 0 0;
  padding:0 15px;
}

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

.accordion > input:checked + label {
  background-color:darkblue;
}

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

Demo

Lihat Demo