Membuat Menu Accordion Dengan CSS

Membuat Menu Accordion Dengan CSS - Kali ini akan membahas lagi mengenai Tabview, dulu saya sempat menjelaskan tentang Tab View Slick Jquery, nah ada teman saya yang Bertanya Namanya ViKrY'X MadZ pertanyaan'a begini "ane mau tanya sob, klo menu tab viewnya, bukan berjajar, tapi dari atas kebawah gt gmn cra buatnya???" nah untuk menjawab pertanyaan tersebut saya langsung aja posting Membuat Menu Accordion Dengan CSS berikut :

DEMO

Join ke Blogger - Rancangan - Edit Html - centang "expand widget template"
Kemudian cari kode ]]></b:skin> lalu letakkan kode CSS berikut diatasnya :

#acc{background:#ffffff;font:13px trebuchet ms;
line-height:1.2em;padding:10px;margin:0;}
#acc h3{background:-moz-linear-gradient(top,#ccc,#999);padding:5px 10px;margin:0;color:#222;
text-shadow:0px 1px 1px #fff;
border-bottom:2px solid #444;}
#acc h3 a{color:#555}
#acc h3 a:hover{color: red}
#acc .post{background:#fff;color:#000;padding:10px;margin:10px 0px;display:none;
border-bottom:2px solid #222;}
#acc :target h3 + .post {display:block;height:150px;overflow:auto;}
#acc :target h3 a{color:#aa5500}

Kemudian Save Template.
Sekarang Pergi ke Tata Letak - Add Widget - Html/Javascript kemudian copy paste kode berikut :

<div id="acc">
<div id="isi1">
<h3><a href="#isi1">Judul 1</a></h3>
<div class="post">
Masukkan item anda disini,bisa berupa teks atau widget </div>
</div>
<div id="isi2">
<h3><a href="#isi2">Judul 2</a></h3>
<div class="post">
Masukkan item anda disini,bisa berupa teks atau widget </div>
</div>
<div id="isi3">
<h3><a href="#isi3">Judul 3</a></h3>
<div class="post">
Masukkan item anda disini,bisa berupa teks atau widget
</div>
</div>
</div>

Ganti tulisan yang berwarna merah dengan Isi Tabview Anda.
Ganti Tulisan yang berwarna kuning dengan Judul Tabview Anda.
Kemudian Save .

Semoga Membuat Menu Accordion Dengan CSS mudah dimengerti dan bermanfaat,