Cara Membuat Accordion dengan CSS

Posted by Tips Trick Blogger Wednesday, January 26, 2011 0 comments

Salam Persahabatan Blogger...pagi-pagi gini dapat tugas luar, dari subuh kerja, tapi cepat rampungnya...akhirnya blogging juga ujung-ujungnya...yah semoga aja bermanfaat dan hasilnya dapat di bagi buat kebersamaan. Ok gan itu hanya sekelumit kesibukan yang kadang menyita waktu, tapi Alhamdulillah ane senang bekerja dengan orang-orang yang mengenal kata tanggung jawab sampai ketulang sum-sum mereka.

Kemarin kawan-kawan nanya ada gak cara mudah bikin accordion, yang sederhana...yah ane jawab aja seadanya..."ada"...kalau gak ada yah di ada-adakan...iya gak? Sebenarnya semua accordion awalnya juga sederhana, sesederhana mouse pertama di dunia. Namun seiring waktu bentuknya berubah sesuai dengan keinginan dan kapasitas intelektualitas manusia..."itu kata dosen ane dulu", disamping itu juga berubahnya segala sesuatu seiring kebutuhan manusia untuk mendukung kebutuhan hidupnya di dunia ini....lho kok jadi jauh ngomongnya!!!

OK sahabat untuk mempersingkat waktu biar gak bosan, langsung aja ane akan share cara membuat accordion yang ke dua pada posting kali ini. Sebelumnya ane pernah share bagaimana membuat accordion menu, silahkan baca di sini. Accordion kali ini menggunakan CSS yang menampilkan bentuk sederhana dari widget namun terkesan elegant. Besarsan bentuk dan tampilan beberapa elemen akan menyesuaikan secara otomatis saat dipasang pada template anda. OK ada baiknya kita lihat dulu contoh demonya di sini. Lihat pada bagian sidebar kanan paling atas yaa...

Bagimana...??? anda tertarik...silahkan ikuti langkah berikut ini.

Log in ke blog anda, jangan punya tetangga nanti malah gak nyambung.
Klik Rancangan
Klik Edit HTML
Masukkan kode CSS ini sebelum kode ]]></b:skin>

.accordion h3 + div {
background:#E0ECF8; /* background kolom accordion 1, silahkan ganti dengan warna kesukaan anda*/
height: 0;
padding: 5px; /* jarak antara tulisan dengan border */
margin:5px; /* jarak antara border dengan judul accordion */
border:1px solid#A9D0F5; /* warna border */
-moz-border-radius-topleft:4px 2px;
-moz-border-radius-topright:3px 4px;
-moz-border-radius-bottomright:6px 2px;
-moz-border-radius-bottomleft:3px 4px;
overflow: hidden;
-webkit-transition: height 0.3s ease-in;
}

.accordion :target h3 + div {
height: 100px;
}

.accordion .section.large:target h3 + div {
overflow: auto;
}

Simpan Template
Klik Rancangan lagi
Klik Tambah Gadget
Pilih HTML/ JavaScript
Masukkan Kode berikut ke dalamnya

<div class="accordion">
<h2>Judul widget di sini</h2>

<h3>
<a href="#one">judul accordion 1 di sini</a>
</h3>
<div>
<p>
<ul>
<li><a href="alamat link di sini">judul 1 di sini</a></li>
<li><a href="alamat link di sini">judul 2 di sini</a></li>
<li><a href="alamat link di sini">judul 3 di sini</a></li>
<li><a href="alamat link di sini">judul 4 di sini</a></li>
</ul>
</p>
</div>
</div>

<h3>
<a href="#two">judul accordion 2 di sini</a>
</h3>
<div>
<p>masukkan tulisan di sini</p>
</div>
</div>

<h3>
<a href="#three">judul accordion 3 di sini</a>
</h3>
<div>
<p>masukkan tulisan di sini</p>
</div>
</div>
</div>

Simpan template dan selesai
Lihat hasilnya

Cara Edit

Bila anda mau merubah accordion 2 (<div id="two" class="section">) menjadi seperti tampilan accordion 1 (dalam bentuk list), silahkan ganti kode

<div id="two" class="section">
<h3>
<a href="#two">judul block accord 2 di sini</a>
</h3>
<div>
<p>masukkan tulisan di sini</p>
</div>
</div>

Ganti kode di atas dengan kode section 1 seperti di bawah ini

<div id="one" class="section">
<h3>
<a href="#one">judul accord 1 di sini</a> /* ganti "#one" dengan "#two" dan "judul accord 1 di sini" menjadi "judul accord 2 di sini"...begitu juga untuk mengganti section 3 dan seterusnya */
</h3>
<div>
<p>
<ul>
<li><a href="alamat link di sini">judul 1 di sini</a></li>
<li><a href="alamat link di sini">judul 2 di sini</a></li>
<li><a href="alamat link di sini">judul 3 di sini</a></li>
<li><a href="alamat link di sini">judul 4 di sini</a></li>
</ul>
</p>
</div>
</div>

Bila nada mau menambah jumlah accordion masukkan copy kode section 1 atau yang section yang mana aja, lalu masukkan sebelum kode </div> yang terakhir ( note: perhatikan kode merah cetak tebal pada kolom orange paling bawah). Contohnya seperti di bawah ini.

yang saya copy adalah kode section 3 seperti ini

<div id="three" class="section">
<h3>
<a href="#three">judul accord 3 di sini</a>
</h3>
<div>
<p>masukkan tulisan di sini</p>
</div>
</div>

Lihat penambahan pada kode cetak merah di bawh ini

<div class="accordion">
<h2>Judul widget di sini</h2>

<h3>
<a href="#two">judul accordion 2 di sini</a>
</h3>
<div>
<p>masukkan tulisan di sini</p>
</div>
</div>

<h3>
<a href="#three">judul accordion 3 di sini</a>
</h3>
<div>
<p>masukkan tulisan di sini</p>
</div>
</div>

<div id="three" class="section"> /* ganti "three" menjadi "four" sesuai urutan */
<h3>
<a href="#three">judul accordion 3 di sini</a> /* judul accordion 3 di sini menjadi judul accordion 4 di sini*/
</h3>
<div>
<p>masukkan tulisan di sini</p>
</div>
</div>

</div>

Begitu juga kalau ingin mengganti menjadi tampilan list seperti section 1
Selamat Mencoba dan Sukses Selalu

''keep spirits and do the best''

Adsense Content. bottom of article