【HTML&CSSのみ vs jQurey使用】アコーディオンを作る方法【比較】

メニューなどでアコーディオンを作りたいけどどうやって作ればいいんだろう？

二つの作り方があるので、実際に作りながら解説させていただきます。

この記事の内容は

jQueryを利用してアコーディオンを作る
HTML&CSSのみでアコーディオンを作る
どちらのやり方がおすすめか？

jQueryを利用してアコーディオンを作る

jQueryを使用したやり方なので、まずはjQueryを読み込みます。下記はjQueryのファイルをダウンロードしてきて、headタグ内で読み込んでおく例です。

HTML

<script src="js/jquery-3.4.1.min.js"></script>

次にHTML内に親要素と子要素を設定し、CSSでデザインを設定します。

HTML

<div class="parent">HTML</div>
<div class="child">
    <ul>
        <li>サイトの作り方</li>
        <li>HTMLの勉強方法</li>
        <li>参考になる書籍</li>
    </ul>
</div>

CSS

ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.parent {
    background-color: aqua;
    width: 300px;
    padding: 5px;
    cursor: pointer;
}

.child {
    background-color: aquamarine;
    width: 300px;
    padding: 5px;
}

次にjQeuryでメニューの開閉部分を実装します。非常に簡単です。

JavaScript

$('.parent').click(function(){
    $('.child').slideToggle();
});

これで以下の画像のような動きになります。

解説

要点を開設していきます。まず親となる要素にはclassとidにparentを指定しています。

マウスカーソルが合わさった時にクリック可能なことがわかるように「cursor: pointer;」を指定しています。

次に親要素がクリックされた際に表示される子要素にはclassとidにchildを指定しています。

こちらがアコーディオン部分として開かれたり閉じたりされる部分です。

JavaScript（jQuery）ではclass=parentがクリックされた際にclass=childが開閉される指定になります。

複数の要素

今回は一つの開閉要素なのでこちらでうまく動いていますが、以下の様に二つ以上メニューがある際にはうまく動きません。

この場合では以下のようにJavaScript部分を修正します。
JavaScript

$('.parent').click(function(){
    $(this).next().slideToggle();
});

$(this)とはクリックされたclassのこと、.next()はその次の要素という意味です。

HTML

<div class="parent">HTML</div>
<div class="child">

このようにparentの次にがchildな為うまく動いていますが、この間に何か別のタグをいれてしまうとそれが.next()の対象になってしまうのでご注意ください。

その場合でも.next().next()と二回続けることで二個先の要素を指定することも可能です。

以上がjQueryを利用したアコーディオンの実装方法でした。

HTML&CSSのみでアコーディオンを作る

続いてjQueryを利用せずにアコーディオンを実装する方法を見ていきましょう。まずhead内でjQueryのファイルを読み込む必要はありません。

最初にすべて載せて、後から解説します。

HTML

<div class="wrapper">
    <label for="chk1">HTML</label>
    <input type="checkbox" id="chk1" class="chk" />
    <div class="child">
        <ul>
            <li>サイトの作り方</li>
            <li>HTMLの勉強方法</li>
            <li>参考になる書籍</li>
        </ul>
    </div>
    <label for="chk2">CSS</label>
    <input type="checkbox" id="chk2" class="chk" />
    <div class="child">
        <ul>
            <li>色の変え方</li>
            <li>文字サイズの変更方法</li>
            <li>CSSの書き方</li>
        </ul>
    </div>
</div>

CSS

ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

label {
    display: block;
    background-color: aqua;
    padding: 5px;
    cursor: pointer;
}

.wrapper {
    width: 300px;
}

.child {
    background-color: aquamarine;
    transition: 0.5s;
    height: auto;
    padding: 5px;
}

.chk {
    display: none;
}

.chk:checked + .child {
    overflow: hidden;
    height: 0px;
    padding: 0px;
}