-->

Cara Membuat Tab Menu Buka Tutup Accordion

Cara Membuat Tab Menu Buka Tutup Accordion,
Disini saya akan mengajarkan kalian untuk carannya membuat menu accordion buka tutup.
Untuk Cara Membuat Tab Menu Accordion Buka Tutup ini sobat bisa ikuti langkah-langkahnya seperti yang saya terangkan di bawah ini :

Cara Membuat Tab Menu Accordion Buka Tutup

Pertama masuk ke akun blog milik sobat ( ya ia laah,,masa milik orang lain ).
Berikutnya masuk ke tata letak>> tambah gadget baru>> HTML/Java script.
Taruh kode di bawah ini ke dalam widget HTML tersebut.

<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcI3m8FFHXOKan54ms6RWPQ9Yd6KG_ipkoSFWS_byGA4KZevzkRlcoBAiJTtRyR4O1ulig0j3fU-BPIk3AQhv0z9MPADRlINJnNQ2KqEVpVUfvA4ITRWQd1LJFrdLtlk6BdYA0_xestA/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
#accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;}
#accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
#accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}
#accordion .content li a:hover {text-decoration:none;color:#000;}
#accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWyvlrEapAcPil7JXQiZAcLRSJG9oBNjFQv0HufJTtKroIXBqk-Jh9ekvnyTwbVHLXFY3fI3vvKnOvaDUWx_MclpDtGz1_sx3710_TZmhThDrwDMELl8_pCQXuIZW-iytX24el4oQoYA/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>
<script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>
Title 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>
Title 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>
Title 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>
Title 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>
Title 5</h2>
<div class="content">
Isi konten 5
</div>
</div>
</div>
</div>
</div>
</div>

\

Terakhir simpan

KETERANGAN

Title = Judul heading accordion

Isi Content = Silahkan Anda isi dengan widget yang akan dipasang (bisa tulisan, script iklan maupun script widget) .

Demikian artikel Cara Membuat Menu Buka Tutup Accordion,
Sekian Terimakasih (http://www.seonih.ga/)*

1 komentar:

Unknown20 November 2015 pukul 18.48
Makasih gan :)
BalasHapus
Balasan

Tambahkan komentar

Pengaturan Komen :
- Sopan
- Dilarang Spam
- Dilarang Komentar SARA
- Dilarang Komentar Dengan Link Aktif

Langganan: Posting Komentar (Atom)