CSS3 Akordion

CSS3 Akordion

by Nothy ~ Kamis, 06 Desember 2012

Di Awal Posting Kali Ini Saya Akan Memberi Tahu CSS3 Akordion Berikut CSS & HTMLnya :

 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: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;
}

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>

DEMO :