• HOME > 
  • JavaScript > 
  • jQueryでアコーディオンメニューを作成する方法【slid...

jQueryでアコーディオンメニューを作成する方法【slideToggle()メソッド】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

アコーディオンメニューとは?

アコーディオンメニューとは、メニューの項目名をクリックすると非表示にされていたコンテンツが項目名の下に広がって表示される仕組みを持ったメニューのことを指します。

アコーディオンのように折りたんだり広げたりする様子からアコーディオンメニューと呼ばれています。

下の例のように、通常の状態ではメニューの項目名だけが並んでいますが、クリックされると中のコンテンツがアコーディオンのように広がって表示されます。

アコーディオンメニューの例

アコーディオンメニューを利用すれば情報量の多いページでも、デザインをすっきりと見せることができる。ユーザーは詳しく見たい情報だけを選んで表示させることが可能になります。

ホームページのナビゲーションメニューにも多く利用されている機能です。

アコーディオンメニューの作り方

アコーディオンメニューはjQueryのslideToggleというメソッドを使用すれば簡単に作成することができます。

jQueryをCDNで読み込む

ここで説明するアコーディオンメニューの作成には、jQueryを使用するので事前にサイトの<head></head>の中などに以下を記述してCDNで読み込んでおいてください。

CDN

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

slideToggleメソッドの使い方

jQueryのslideToggleメソッドは、ユーザーがクリックするたびに要素の表示非表示を上下にスライドアニメーションさせながら切り替えてくれるメソッドです。

toggleと名がつくメソッドの特徴は、クリックするたびに交互に処理が行われるという点です。

プレーンのtoggleメソッドを含め4種類のメソッドが存在し、それぞれ以下のような効果を持ちます。

toggle()要素の表示非表示を交互に切り替える
fadeToggle()要素の表示非表示をフェードイン・フェードアウトさせながら切り替える
slideToggle()要素の表示非表示を上下にスライドさせながら切り替える
toggleClass()要素に任意のクラスを付けたり外したりする

slideToggleメソッドは、クリックの度にスライドしながら表示非表示が切り替わるので、まさにアコーディオン機能を作る際にうってつけのメソッドです。

今回はこのslideToggleメソッドを使用してアコーディオンメニューを作る方法を説明していきます。

HTMLで要素を用意する

まずはHTMLでアコーディオンメニューを構成する要素を用意します。

クリックするメニュー項目の要素と表示非表示を切り替えるコンテンツ部分とを隣接させておいて下さい。

idを付与していますが必須ではありません。今回は項目名をわかりやすいように色分けするために付与しています。

HTML

<div class="acList">
メニュータイトルをクリックすると開きます。
<!--項目⇣-->
<div class="acItem">
    <div id="acTitle1" class="acTitle">メニュータイトル1</div>
    <div class="acInner">
        <img src="https://web.skipjack.tokyo/wp-content/uploads/javascript/accordion/forest.jpg" alt="画像イメージ">
        <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    </div><!--end acInner-->
</div><!--end acItem-->
<!--項目⇣-->
<div class="acItem">
    <div id="acTitle2" class="acTitle">メニュータイトル2</div>
    <div class="acInner">
        <img src="https://web.skipjack.tokyo/wp-content/uploads/javascript/accordion/landscape.jpg" alt="画像イメージ">
        <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    </div><!--end acInner-->
</div><!--end acItem-->
<!--項目⇣-->
<div class="acItem">
    <div id="acTitle3" class="acTitle">メニュータイトル3</div>
    <div class="acInner">
        <img src="https://web.skipjack.tokyo/wp-content/uploads/javascript/accordion/forest.jpg" alt="画像イメージ">
        <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    </div><!--end acInner-->
</div><!--end acItem-->
<!--項目⇣-->
<div class="acItem">
    <div id="acTitle4" class="acTitle">メニュータイトル4</div>
    <div class="acInner">
        <img src="https://web.skipjack.tokyo/wp-content/uploads/javascript/accordion/landscape.jpg" alt="画像イメージ">
        <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    </div><!--end acInner-->
</div><!--end acItem-->
</div><!--end acList-->

CSSで非表示にする

ページ読み込み時にコンテンツを非表示にしておく処理はCSSで行います。コンテンツのクラスに対して「display:none」を記述して非表示にしておいてください。その他のメニューやコンテンツのデザインは自由に作成してください。

CSS

.acItem{
    width: 100%;
    max-width:600px;
    margin: 5px;
}
.acTitle{
    width: 100%;
    padding: 10px;
    color:#f9f9f9;
    font-weight: bold;
    text-align: center;
    border:solid 1px #e9e9e9;
    border-radius: 5px;
}
.acTitle:hover{
    cursor: pointer;
    opacity: .8;
    transition: .5s;
}
#acTitle1{
    background:#000dd4;
}
#acTitle2{
    background:#ddd000;
}
#acTitle3{
    background:#dd4000;
}
#acTitle4{
    background:#00d444;
}
.acInner{
    display: none;/*非表示にする*/
    background:#f9f9f9;
    padding:10px;
}

jQueryでクリックイベントを作成する

項目名がクリックされたらslideToggleが発動するように、クラス「.acTitle」をセレクターにしてonメソッドを使ってクリックイベントを作成します。

クリックされた項目のコンテンツを開くようにしたいので、「this」をセレクターにしnextメソッドを使って隣接する要素を指定、slideToggleで開閉するように設定します。

slideToggleメソッドは下記のようにスライドするスピードをミリ秒で指定することも可能です。(今回は500ミリ秒=0.5秒にしました)

jQuery

$(function(){
    //クリックされたら
    $(".acTitle").on("click",function(){
        //中身をスライドさせながら表示非表示
        $(this).next().slideToggle(500);
    });//end click
});//end function

以上でアコーディオンメニューの機能の部分は完成です。

アイコンの表示を切り替える

必須事項ではありませんが、アコーディオンメニューであることをユーザーにわかりやすく伝えるためにアイコンを付けておきましょう。

アコーディオンメニューには矢印ボタンや+ボタンがよく使われています。

アイコンの表示はHTMLに追記するのではなく、疑似要素であるbeforeもしくはafterを使って表示します。

リンク先のサムネイル
CSSの疑似要素・疑似クラスの種類と使い方

疑似要素・疑似クラスは、どちらも元となる(基準となる)要素に対して追加のスタイルを指定したり装飾を行うために使用するCSSのセレクタ―です...【もっと読む】

Font Awesomeを利用してアイコンを表示する

表示させるアイコンはフリー素材を利用したり自作しても構いませんが、ここでは無料のFont Awesomeのアイコンを利用します。

https://fontawesome.com/v5/search

Font Awesomeを使用するために、サイトの<head></head>の中などに以下のCDNを読み込ませておきます。

CDN

<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">

各アイコンのページにはユニコードが用意されているので、使いたいアイコンのコードをコピーして疑似要素のcontentプロパティに貼り付けます。

疑似要素は以下のように記述することで、Font Awesomeのアイコンを表示することができます。

CSS

/*閉じている時のアイコン*/
.acTitle:after{
    content:"\f103";
    font-family:"Font awesome 5 free";
    font-weight:bold;
    margin-left:10px;
}
/*開いているときのアイコン*/
.acTitle.active:after{
    content:"\f102";
    font-family:"Font awesome 5 free";
    font-weight:bold;
    margin-left:10px;
}

上部は閉じている時、下部はこのあとjQueryで付与するクラス「active」も追加し開いている状態を指します。それぞれの状態の時に表示させたいアイコンを設定しておきます。

toggleClassメソッドを使ってアイコンを切り替える

まずはじめにjQueryで疑似要素を直接操作することはできないという点を覚えておきましょう。この場合では、cssメソッドで疑似要素のcontentプロパティを書き換える方法が思い浮かびそうですが実現できません。

jQueryで疑似要素を操作する場合はクラスの付け外しによるCSSと連動させた方法を使います。

ここでは先程少し触れた「toggleClass」メソッドを使用してクリックの度にクラスが付け外しされるように設定します。

先程のクリックイベントに追記して以下のようにします。

jQuery

$(function(){
    //クリックされたら
    $(".acTitle").on("click",function(){
        //中身をスライドさせながら表示非表示
        $(this).next().slideToggle(500);
        //タイトルにクラスを付け外し
        $(this).toggleClass("active");
    });//end click
});//end function

以上がjQueryでアコーディオンメニューを作成する方法になります。slideToggle自体の使い方は簡単ですが、セレクターの指定の仕方とHTML側での要素の組み立て方を間違えないように注意してください。

まとめ

アコーディオンメニューはslideToggleメソッドのおかげで非常に簡単に実装することが可能です。

jQueryのユーザーインターフェースに特化したライブラリであるjQueryUIにもアコーディオン機能は用意されています。こちらも簡単な導入手順で実装できるのでご検討ください。

広告
広告

関連する記事

サムネイル

JSで入力値が英数字や半角かどうか即時文字チェックする【ma……

2024年10月02日
JavaScriptのmatch()は、正規表現を使って対象の文字列の中に一致するものがあるか検索できるメソッドです。このページではテキストボックスに入力された文字が数字や半角かどうかチェックする機能をmatchメソッドを使って実装する方法ついてご紹介します。
サムネイル

JSでHTMLのデータ属性を取得・更新する方法【datase……

2024年10月02日
JavaScriptのdatasetで要素のdata属性を操作する JavaScriptのdatasetは、HTML要素に設定されたデータ属性(data-*** […]
サムネイル

JavaScriptでラジオボタンの値(value)を取得す……

2024年10月02日
JSでラジオボタンの値を取得・操作する JavaScriptによるラジオボタンの操作(値の取得やチェックの切り替え)の方法を備忘録として残しておきます。 JSで […]
サムネイル

JSで大文字から小文字(小文字から大文字)へ変換する方法

2024年10月02日
JavaScriptで大文字と小文字を変換する JavaScriptを使った文字検索フォームを作るにあたり、大文字小文字どちらで入力されても良いよう、変換処理を […]
サムネイル

JSのclassList.toggleでクラスの付け外しを行……

2024年09月04日
classList.toggleとは? まず「classList」とは要素のクラス属性の情報を参照するプロパティで、「classList.add()」や「cla […]
サムネイル

JSで要素が特定のクラスを持つか調べる【classList.……

2024年09月04日
JSで要素が特定のクラスを持つか調べるには? JavaScriptで要素が特定のクラスを持つか調べるには「classList.contains」を使います。 「 […]
サムネイル

JSで文字列の中の任意の位置に別の文字を挿入する【slice……

2024年09月04日
JavaScriptに文字列の中の任意の位置に別の文字を挿入するにはslice()メソッドを利用します。sliceは特定の文字列の任意の位置から任意の文字数分を切り出すメソッドで、これを使って対象の文字列を一旦分解し、挿入したい文字と一緒新しい文字列としてくっつけ直します。