Cara Membuat Efek Accordion Menu di Blog

Table of Contents

Membuat Efek Accordion Menu - Accordion Menu ialah efek untuk memunculkan suatu content didalam suatu elemen dengan hanya mengeklik elemen itu sendiri maka akan muncul content tersebut.Pada kesempatan kali ini saya akan berbagi cara untuk membuatnya untuk di Blog.untuk sobat yang ingin mencobanya di blog,langsung saja kita mulai membuat Accordion menu

Langkah 1 : Membuat Efek Accordion Menu

Login Ke akun blog anda >Tema > Edit HTML

Kemudian Cari Kode </b:skin> Agar lebih mudah gunakan CTRL + F 
kemudian paste kode di bawah ini tepat di atas kode </b:skin>

/* Accordion */
.accordionWrapper{padding:30px;background:#fff;float:left;width:80%;box-sizing:border-box;margin:10%;    box-shadow: 0 1.5em 85px 0 rgba(0, 0, 0, 0.2);}
.accordionItem{
    float:left;
    display:block;
    width:100%;
    box-sizing: border-box;
    font-family:'Open-sans',Arial,sans-serif;
}
.accordionItemHeading{
    cursor:pointer;
    margin:0px 0px 10px 0px;
    padding:10px;
    background:#2980b9;
    color:#fff;
    width:100%;
    -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
        box-sizing: border-box;
}
.close .accordionItemContent{
    height:0px;
    transition:height 1s ease-out;
    -webkit-transform: scaleY(0);
 -o-transform: scaleY(0);
 -ms-transform: scaleY(0);
 transform: scaleY(0);
    float:left;
    display:block;
    
    
}
.open .accordionItemContent{
        padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    width: 100%;
    margin: 0px 0px 10px 0px;
    display:block;
    -webkit-transform: scaleY(1);
 -o-transform: scaleY(1);
 -ms-transform: scaleY(1);
 transform: scaleY(1);
    -webkit-transform-origin: top;
 -o-transform-origin: top;
 -ms-transform-origin: top;
 transform-origin: top;

 -webkit-transition: -webkit-transform 0.4s ease-out;
 -o-transition: -o-transform 0.4s ease;
 -ms-transition: -ms-transform 0.4s ease;
 transition: transform 0.4s ease;
        box-sizing: border-box;
}

.open .accordionItemHeading{
    margin:0px;
        -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    background-color: #bdc3c7;
    color: #7f8c8d;
}

Langkah 2 : Membuat Efek Accordion Menu

Cari kode </body> 

Biasanya kode ini berada di bawah jadi langsung scroll ke bawah saja

Kemudian pastekan kode di bawah ini tepat di atas kode </body> 

<script type='text/javascript'>
var accItem = document.getElementsByClassName(&#039;accordionItem&#039;);
    var accHD = document.getElementsByClassName(&#039;accordionItemHeading&#039;);
    for (i = 0; i &lt; accHD.length; i++) {
        accHD[i].addEventListener(&#039;click&#039;, toggleItem, false);
    }
    function toggleItem() {
        var itemClass = this.parentNode.className;
        for (i = 0; i &lt; accItem.length; i++) {
            accItem[i].className = &#039;accordionItem close&#039;;
        }
        if (itemClass == &#039;accordionItem close&#039;) {
            this.parentNode.className = &#039;accordionItem open&#039;;
        }
    }
</script>

Langkah 3 : Membuat Efek Accordion Menu

Kemudian langkah terakhir untuk menampilan Accordion di blog dengan pastekan kode di bawah ini ke Postingan anda Pastekan di HTML bukan Compose 

 VERSI 1

<div class="accordionWrapper">
<div class="accordionItem open">
<h2 class="accordionItemHeading">
Attention 1</h2>
<div class="accordionItemContent">
ISI CONTENT ANDA
</div>
</div>
<div class="accordionItem open">
<h2 class="accordionItemHeading">
Attention 2</h2>
<div class="accordionItemContent">
ISI CONTENT ANDA
</div>
</div>
<div class="accordionItem open">
<h2 class="accordionItemHeading">
Attention 3</h2>
<div class="accordionItemContent">
ISI CONTENT ANDA
</div>
</div>
</div>

 VERSI 2

<div class="accordionItem open">
<h2 class="accordionItemHeading">
Attention 1</h2>
<div class="accordionItemContent">
ISI CONTENT ANDA</div>
</div>
<div class="accordionItem close">
<h2 class="accordionItemHeading">
Attention 2</h2>
<div class="accordionItemContent">
ISI CONTENT ANDA</div>
</div>
<div class="accordionItem close">
<h2 class="accordionItemHeading">
Attention 3</h2>
<div class="accordionItemContent">
ISI CONTENT ANDA</div>
</div>

  Selesai~

Mungkin hanya itu saja jika ada kesulitan atau kesalahn code bisa comment di bawah~
Untuk melihat demo bisa klik link di bawah ini

• DEMO

Sumber Code

Codepen