Mecha versi 2.6.3 sudah dirilis!

CSS3 Accordion

Tabel Konten
  1. HTML 
  2. CSS 
  3. Demo 

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

12 Komentar

abang ichal

oo di dmonya situu udah dibedakan mana toggle dan mana accrodion. srkng sy dah mengerti.

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 ??

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...


<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 21</li>
<li>Sub Menu 22</li>
<li>Sub Menu 23</li>
<li>Sub Menu 24</li>
<li>Sub Menu 25</li>
<li>Sub Menu 26</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>Sub Menu 31</li>
<li>Sub Menu 32</li>
<li>Sub Menu 33</li>
<li>Sub Menu 34</li>
<li>Sub Menu 35</li>
<li>Sub Menu 36</li>
</ul>
</li>

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

<!-- Tidak Valid -->
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<div class="clear"></div>
</ul>
<!-- Valid -->
<ul>
<li><div>List Item</div></li>
<li><div>List Item</div></li>
<li><div>List Item</div></li>
</ul>

V

itu kaya SubList kang,, gini tampilannya.

Taufik Nurrohman

⇒ https://www.google.com/search?q=css3-treeview-no-javascript

Komentar telah ditutup.