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.

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

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