【jQuery】アコーディオンをslideToggleを使って実装【4行】

この記事では、jQueryのslideToggleメソッドを使って、アコーディオンを実装する方法を説明します。

サンプルコードを用意してあるので、そのままコピペすれば使えるはずです。

必要なJavaScriptのコードはわずか4行！

簡単なので早速見ていきましょう。

下準備
アコーディオンを実装する
jQueryのslideToggleで簡単にアコーディオンを実装しよう

下準備

jQueryを使うので、自作のJavaScriptソースコードより前でロードしておく必要があります。

今回はCDN（Content Delivery Network）を用いてロードしましょう。

jQueryをダウンロードして自分のサーバーに置くこともできますが、CDNの方が楽なのでこの方法を推奨します。

<!-- 自作のJavaScriptコードより前でjQueryをロードしておく -->
<script src="https://code.jquery.com/jquery-3.5.0.min.js"
    integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
    crossorigin="anonymous">
</script>

integrity属性は、CDNから取得したファイルが改竄されていないかどうかをチェックするのに必要な属性です。

ハッシュ値（上のサンプルだとsha256から始まる謎の文字列）を指定することで、改ざんがあった場合に見破ることが出来ます。

crossorigin属性は、申し訳ないですがよく意味がわかりませんでした。

どうもCDNサーバーに送る情報を制限するものらしいのですが・・・。

アコーディオンを実装する

それではアコーディオンを実装してみます。

See the Pen Accordion1 by gsg0222 (@gsg0222) on CodePen.

HTMLとCSSについては特に問題はないと思うので、jQueryの部分だけ説明します。

といっても、とても簡単。

1行目でclickイベントを拾ってきて
2行目でthis（この場合.questionクラスを持っているdiv）の次の要素（.answerクラスを持ったdiv）を変数answerに代入し
3行目で閉じる、または開く処理をする

これだけです。

3行目はslideToggleで実装しています。

これは、対象がdisplay: none;のときはdisplay: block;に、displayがnone以外の場合はnoneにしてくれる関数です。

アコーディオンが開いているか閉じているか、自分でif文を書く必要もなくて非常に便利です。

同じような関数として、toggleというものもありますが、toggleだとスライドするアニメーションが付きません。

なお、対象のdisplayが何だったのか保存してくれているので、例えばdisplay:flex;の要素を開いたり隠したりしてもしっかりと動作してくれます。

See the Pen Accordion2 by gsg0222 (@gsg0222) on CodePen.

jQueryのslideToggleで簡単にアコーディオンを実装しよう

以上、たった4行で簡単に実装できるアコーディオンでした。

CSSだけでもアコーディオンを作れるのですが、jQueryを使う場合の魅力はとにかく楽なことです。

難しいことをする前に、まずは楽な方法で動かしてみましょう。

複雑なことを試すのは、その後でも十分だと思います。