Javascript5行でアコーディオンメニューを実装する

accordion


当記事ではjavascript5行でアコーディオンメニューを実装する方法について記します。


jQueryは使用せずに実装してみます。
動きはスルスルと動くようにしてみましょう。
記事の下の方に実際に動かせるデモを用意しております。





①HTML

まずはHTMLでパーツを用意します。
accordionというクラスの中にボタンとコンテンツがあるだけのシンプルなものです。

<div class="accordion">
    <p>アコーディオンボタン1</p>
    <p>アコーディオンコンテンツ1</p>
</div>
<div class="accordion">
    <p>アコーディオンボタン2</p>
    <p>アコーディオンコンテンツ2</p>
    <p>アコーディオンコンテンツ2</p>
</div>
<div class="accordion">
    <p>アコーディオンボタン3</p>
    <p>
        アコーディオンコンテンツ3<br>
        アコーディオンコンテンツ3<br>
        アコーディオンコンテンツ3<br>
    </p>
</div>





②CSS

CSSでスタイルを整えます。
ボタンに色をつけて、矢印もつけておきます。
動きの部分で重要なのが13行目から24行目になります。
15行目と22行目のpaddingはスルスルとコンテンツを動かすために重要な設定になります。

.accordion{
    margin: 0 0 20px;
}
.accordion p{
    padding: 10px;
    border: 1px solid;
    margin: 0 0 -1px;
}
.accordion p:first-child{
    cursor: pointer;
    background: #FFD54F;
}
.accordion p:not(:first-child){
    height: 0;
    padding: 0 10px;
    visibility: hidden;
    overflow: hidden;
    transition: 0.4s;
}
.accordion.open p:not(:first-child){
    height: auto;
    padding: 10px;
    visibility: visible;
}
.accordion p:first-child::after{
    content: '▼';
    float: right;
}
.accordion.open p:first-child::after{
    content: '▲';
}





③Javascript

最後にjavascriptでボタンクリックのイベントを登録します。
ボタンがクリックされたら親クラスにopenというクラスを付与するだけのシンプルなものになります。

document.querySelectorAll('.accordion').forEach(function(elem){
    elem.querySelector('p').addEventListener('click',function(){  
        elem.classList.toggle('open')
    })
})




デモ

実際に動くデモを用意しました。
アコーディオンボタンをクリックするとコンテンツが開くと思います。

アコーディオンボタン1

アコーディオンコンテンツ1

アコーディオンボタン2

アコーディオンコンテンツ2

アコーディオンコンテンツ2

アコーディオンボタン3

アコーディオンコンテンツ3
アコーディオンコンテンツ3
アコーディオンコンテンツ3





ソースコード全文

最後にソースコードを全文載せておきます。

<div class="accordion">
    <p>アコーディオンボタン1</p>
    <p>アコーディオンコンテンツ1</p>
</div>
<div class="accordion">
    <p>アコーディオンボタン2</p>
    <p>アコーディオンコンテンツ2</p>
    <p>アコーディオンコンテンツ2</p>
</div>
<div class="accordion">
    <p>アコーディオンボタン3</p>
    <p>
        アコーディオンコンテンツ3<br>
        アコーディオンコンテンツ3<br>
        アコーディオンコンテンツ3<br>
    </p>
</div>

<style>
    .accordion{
        margin: 0 0 20px;
    }
    .accordion p{
        padding: 10px;
        border: 1px solid;
        margin: 0 0 -1px;
    }
    .accordion p:first-child{
        cursor: pointer;
        background: #81C784;
    }
    .accordion p:not(:first-child){
        height: 0;
        padding: 0 10px;
        visibility: hidden;
        overflow: hidden;
        transition: 0.4s;
    }
    .accordion.open p:not(:first-child){
        height: auto;
        padding: 10px;
        visibility: visible;
    }
    .accordion p:first-child::after{
        content: '▼';
        float: right;
    }
    .accordion.open p:first-child::after{
        content: '▲';
    }
</style>

<script>
    document.querySelectorAll('.accordion').forEach(function(elem){
        elem.querySelector('p').addEventListener('click',function(){  
            elem.classList.toggle('open')
        })
    })
</script>







以上、Javascriptでアコーディオンを実装する方法でした。

You can subscribe by SNS

スポンサーリンク

人気記事