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

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

<div class="panel">
    <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>

PREVIEW
PANEL TOGGLE

Lorem Ipsum

Content...

Lorem Ipsum

Content...

Lorem Ipsum

Content...

Lorem Ipsum

Content...

HTML Akordion

<div class="panel">
    <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>

PREVIEW AKORDION

Lorem Ipsum

Content...

Lorem Ipsum

Content...

Lorem Ipsum

Content...

Lorem Ipsum

Content...

CSS

.panel {   
    position:relative;   
    background-color:#555555; 
    border:2px outset #555555;
}  

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

.panel > label {   
    display:block;   
    font:bold 12px/30px Arial,Sans-Serif;   
    background-color:#222222; 
border-bottom:2px inset #222222;   
    color:white;   
    margin:-30px 0 0 0;   
    padding:0 15px; 
}  

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

.panel > input:checked + label {   
    background-color:#660000; 
    border-left:2px outset #660000;
    border-right:2px outset #660000;
    border-top:2px outset #660000;
    border-bottom:2px outset #555555;
}  

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