Simple Accordion with CSS and Jquery

Simple Accordion with CSS and Jquery

Simple Accordion with CSS and Jquery. Maaf kalo gambar thumbnailnya agak aneh, hahahaha. Mungkin kita sering mendengar kata accordion yang bisa diartikan dengan bergeser. Makanya, ketika kita mendengar kata geser kita akan teringat accordion. Hahahah... bolak balik bingung nih.. 😆

Biasanya accordion digunakan untuk menghemat tempat di halaman blog, agar terlihat lebih rapi. Dan kali ini saya akan membagikan efek accordian responsive yang bisa kita terapkan dimanapun baik di header, difooter maupun di widget sidebar. Bagaimana cara membuatnya? Let's check it out!!

Demo

Cara membuat Efek Accordion with CSS and Jquery

1. Buka blogger.com lalu klik template yang ada disamping kiri layar.
2. Pada jendela yg terbuka klik edit HTML lalu cari sidebar-wrapper. Untuk cara lebih cepat silakan klik pada jendela edit HTML lalu pencet Ctrl+F kemudian ketik sidebar-wrapper lalu Enter
3. Silakan masukkan kode HTML berikut ini dibawahnya.

<!-- Accordion Menu [Start] -->

<div id="accordion-menu">
<ul>
<li>
<a class="open" href="https://draft.blogger.com/blogger.g?blogID=6514017338473939986#">Accordion 1</a>
<ul class="anak">
<li><a href="https://draft.blogger.com/null">Link 1</a></li>
<li><a href="https://draft.blogger.com/null">Link 2</a></li>
<li><a href="https://draft.blogger.com/null">Link 3</a></li>
</ul>
</li>
<li>
<a class="open" href="https://draft.blogger.com/blogger.g?blogID=6514017338473939986#">Accordion 2</a>
<ul class="anak">
<li><a href="https://draft.blogger.com/null">Link 1</a></li>
<li><a href="https://draft.blogger.com/null">Link 2</a></li>
<li><a href="https://draft.blogger.com/null">Link 3</a></li>
</ul>
</li>
<li>
<a class="open" href="https://draft.blogger.com/blogger.g?blogID=6514017338473939986#">Accordion 3</a>
<ul class="anak">
<li><a href="https://draft.blogger.com/null">Link 1</a></li>
<li><a href="https://draft.blogger.com/null">Link 2</a></li>
<li><a href="https://draft.blogger.com/null">Link 3</a></li>
</ul>
</li>
</ul>
</div>

<!-- Accordion Menu [End] -->

4. Lalu cari </b:skin> pastekan kode CSS berikut diatasnya

/***Accordion Menu [Start]***/
#accordion-menu {
width:100%;
color:#fff;
font-size: 12px;
padding: 10px;
}
#accordion-menu li {
list-style:none;
background: #03A9F4;
border-bottom: 1px solid #fff;
}
#accordion-menu .open {
cursor: pointer;
display: block;
padding: 5px 0px 5px 0px;
background-color: #b1b1b1;
margin: 0px 0px 1px 0px;
padding: 5px 5px 5px 15px;
background:transparent url('../images/accordionmenu/up.png') no-repeat 0px 6px;
}
#accordion-menu .open-selected {
background-color: #898989;
background:transparent url('../images/accordionmenu/down.png') no-repeat 0px 7px;
}
#accordion-menu .anak li a:hover {
border-left: 15px solid #fff;
transition: all .1s;
}
#accordion-menu .anak li a {
border-left: 5px solid #fff;
padding-left: 5px;
transition: all .1s;
display: block;
}
#accordion-menu .anak li {
border-bottom: none;
padding: 0px 10px 10px 15px;
color: #111;
}
#accordion-menu a {
color: #fff;font-weight:bold;
}

5. Langkah terakhir silakan masukkan javascript berikut di atas </body>

<script type="text/javascript">
  /*<![CDATA[*/
//Accordion
  $('#accordion-menu .open').click(function() {     $('#accordion-menu .open').removeClass('open-selected');    $('#accordion-menu ul li ul').slideUp('normal');   if($(this).next().is(':hidden') == true) {    $(this).addClass('open-selected');    $(this).next().slideDown('fast');    }       });  $('#accordion-menu ul li ul').hide();
  /*]]>*/
</script>

6. Save.

Demikian sekilas tutorial tentang Simple Accordion with CSS and Jquery, semoga bermanfaat.
Terimakasih telah membaca artikel Agung Jaka Nugraha.

Wassalam

Simple Accordion with CSS and Jquery