• 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にもアコーディオン機能は用意されています。こちらも簡単な導入手順で実装できるのでご検討ください。

広告
広告

関連する記事

サムネイル

JavaScriptで偶数と奇数を判定する方法【テーブルの行……

2024年05月16日
ある数値が偶数か奇数かは、「数値を2で割って余りが0なら偶数」「数値を2で割って余りが0でなければ奇数」という方法で判別を行います。
サムネイル

JSで郵便番号検索を実装できるライブラリ【yubinbang……

2024年04月12日
yubinbango.jsは郵便番号検索(郵便番号を打ち込むと住所が自動入力される)機能を簡単に実装できるのライブラリです。一実装方法がとても簡単なのでメールフォームなどに手軽に郵便番号検索機能を導入したい方におすすめです。
サムネイル

JSで特定の位置までスクロールされたら要素を固定する方法【s……

2024年04月12日
CSSのstickyのような動きをJSで実装する JavaScriptを使って、「ある要素がページ上部に当たるまでスクロールされたら、その位置でその要素を固定表 […]
サムネイル

JSで日付を表示するならtoLocaleDateString……

2024年03月15日
toLocaleDateStringは日付のフォーマットを少ないコードで簡潔に行えるメソッドです。20XX年X月X日というような年月日表示はもちろん、曜日の取得や西暦と和暦の変換まで即座に行ってくれます
サムネイル

JSで自動かな入力補完を実装できるライブラリ【jquery.……

2024年03月15日
jquery.autokana.jsは入力された日本語テキストのふりがな(フリガナ)を自動的に別の欄に入力してくれるJQueryのライブラリです。
サムネイル

JSでページ離脱時にメッセージを出す方法【beforeunl……

2024年03月15日
JavaScriptのイベントであるbeforeunloadを使えばページを離脱する前にメッセージを出して注意を促すことができます。
サムネイル

Javascriptのlightboxライブラリの使い方【画……

2023年10月01日
最終更新日:2023年09月12日
lightboxライブラリでできること Webサイトでは、ユーザーがクリックすると大きい画像が開くという表示方法が良く用いられます。 一覧では小さい画像を並べて […]