Kerangka dasar untuk membuat 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; }