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;
}
12 Komentar
abang ichal
oo di dmonya situu udah dibedakan mana toggle dan mana accrodion. srkng sy dah mengerti.
Surga Kenari
pilih yg toggle saya :D
Putra
tinggal dikasih transisi, terus dipasang di sidebar keren nih :D
Yusril Ibnu Maulana
tanya, tanya, tanya lagi hehehehe
kenpa yah blog saya kalau belum ada komentanya ada Tulisan Leave a Reply dan ada backgroundnya tapi kalau (contoh : http://plustutorial.blogspot.com/2012/05/cara-membuat-bubble-tooltips-dengan.html ) tapi kalau ada komentranya background dan add a reply-nya hilang contoh cek http://plustutorial.blogspot.com/2012/07/belajar-keyframes-dengan-mudah-ver-2.html , kenapa yah ?? cara mengatasinya bagaimana ??
Taufik Nurrohman
Mungkin cuma beda desain saja.
Mr. D
Thanks untuk panduannya, aku belum bisa komen panjang karena perlu dipraktekin dulu. Nanti kalo sudah ngerti aku akan kasih komen lagi. Good job, Mister.
V
Kalau Menu dalam tag <i> bisa gak dijadikan akordion pakai css ini kang?
jadi submenu baru keluar ketika menu di klik, seperti widget Archive gitu kang...
Taufik Nurrohman
Tag
<ul>
dan<li>
tidak boleh masuk ke dalam tag<i>
. Tidak valid.you
kalau sebaliknya mas..? untuk tag
<div>
di dalam<ul>
jg sama ya tidak valid?Taufik Nurrohman
V
itu kaya SubList kang,, gini tampilannya.
Taufik Nurrohman
⇒ https://www.google.com/search?q=css3-treeview-no-javascript