Untuk membuat tab accordion sederhana langkah pertama bukalah sebuah notepad, kemudian copy lah code dibawah ini
<html>
<head>
<title> ... 201453014 ... </title>
<style type="text/css">
#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
</style>
</head>
<body>
<div id="acc"> <div id="isi1">
<h3><a href="#isi1"> Buah-Buahan</a></h3>
<div class="post">
<ul>
<li><a href="http://bibitbunga.com/wp-content/uploads/2014/12/jeruk-mandarin.jpg">Jeruk</a></li>
<li><a href="http://www.pertanianku.com/wp-content/uploads/2015/08/Mangga-Sumber-Vitamin-dan-Mineral.jpg">Mangga</a></li>
<li><a href="http://producemadesimple.ca/wp-content/uploads/2015/06/rambutan-square.jpg">Rambutan</a></li>
</ul> </div> </div>
<div id="isi2">
<h3><a href="#isi2">Bunga</a></h3>
<div class="post">
<ul>
<li><a href="http://manfaat.co.id/wp-content/uploads/2015/02/Manfaat-Bunga-Melati.jpg">Melati</a></li>
<li><a href="https://izzanisa22m2k.files.wordpress.com/2013/11/red-rose-wallpapers-by-cool-wallpapers-121.jpg">Mawar</a></li>
<li><a href="http://sehatdokter.com/wp-content/uploads/2015/06/Manfaat-Bunga-Kamboja.jpg">Kamboja</a></li>
</ul> </div> </div>
<div id="isi3">
<h3><a href="#isi3">Hewan Karnivora</a></h3>
<div class="post">
<ul>
<li><a href="http://artimimpi-az.com/wp-content/uploads/2015/10/Arti-Mimpi-Digigit-dan-Dikejar-Harimau-Masuk-Rumah.jpg">Harimau</a></li>
<li><a href="http://3.bp.blogspot.com/-aOVyyvDo6pY/TptUn-N7dqI/AAAAAAAAAjs/p9V-B3f_DCE/s1600/Lion%2Bwallpapers%2Bfor%2Bdesktop%2B2.jpg">Singa</a></li>
<li><a href="https://upload.wikimedia.org/wikipedia/commons/5/5a/Canis_lupus_265b.jpg">Serigala</a></li>
</ul> </div> </div>
</body>
</html>
Ubah text yang berwarna hijau menjadi kategori yang diinginkan, warna biru untuk nama jenis dari kategori, dan merah untuk link yang dituju.
Setelah selesai simpan notepad dengan ekstensi file .html, kemudian jalankan program tersebut.
Selamat mencoba !!!
0 Komentar