更新 2018 / 09 / 19

アコーディオン

事前にJqueryを読み込んでください。

https://jquery.com/ 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

SAMPLE

アコーディオンメニュー1
アコーディオンメニューが開く。
アコーディオンメニュー2
アコーディオンメニューが開く。
アコーディオンメニュー3
アコーディオンメニューが開く。

JS

<script>$(function(){
        $("#acMenu dt").on("click", function() {
        $(this).next().slideToggle();
        });
});</script>

HTML

<dl id="acMenu">
<dt>アコーディオンメニュー1</dt>
<dd>アコーディオンメニューが開く。</dd>
<dt>アコーディオンメニュー2</dt>
<dd>アコーディオンメニューが開く。</dd>
<dt>アコーディオンメニュー3</dt>
<dd>アコーディオンメニューが開く。</dd>
</dl>

CSS

#acMenu dt{
    display:block;
    width:100%;
    height:50px;
    line-height:50px;
    text-align:center;
    cursor: pointer;
    background: #a6dfec;
    border-radius: 6px;
}

#acMenu dd{
    background:#f2f2f2;
    width:100%;
    height:50px;
    line-height:50px;
    text-align:center;
    border:#666 1px solid;
    display:none;
}