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

JavaScript

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

投稿日:2022年03月11日

このページには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の疑似要素・疑似クラスの種類と使い方

疑似要素・疑似クラスは、どちらも元となる（基準となる）要素に対して追加のスタイルを指定したり装飾を行うために使用する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にもアコーディオン機能は用意されています。こちらも簡単な導入手順で実装できるのでご検討ください。