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

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

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

Contents

①HTML
②CSS
③Javascript
デモ
ソースコード全文

①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

アコーディオンボタン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でアコーディオンを実装する方法でした。