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

アコーディオンをslideToggleを使って実装アイキャッチプログラム
スポンサーリンク

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

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

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

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

下準備

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を使う場合の魅力はとにかく楽なことです。

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

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

JavaScriptを初歩から学びたいなら、次の本とサイトがおすすめです
ブラウザを使って少しずつJavaScriptを学ぶことができる本です。
コンソールに文字列を表示することから始まって、最終的にはAPIを使いこなして天気予報を表示することまでできるようになります。
ブラウザでの利用ではなく、Node.jsなどよりプログラムとしての勉強をしたいならこちらのサイトがおすすめ。
細かな言語仕様をしっかり説明してくれるサイトです。無料でこんなサイトを作ってくれる方がいることに感謝したくなります。
書籍版もあるので、手元にものが欲しい人はそちらを入手しても良いかもしれません。

コメント

タイトルとURLをコピーしました