

そんな悩みにお答えします。
アコーディオンメニューはWebサイトではFAQ、Q&A、よくある質問で非常によく見かけます。
ですので必ず習得すべき実装スキルですが、初学者には非常に難敵です。
僕は最初仕組みが全然理解できなくて、まったく思うように動かせませんでした。
この記事はそんな過去の僕と同じように行き詰まっている方に向けて書きます。
アコーディオンメニューの基本パターン、応用パターン、矢印パターン、プラスマイナスパターンを網羅します。
今回の7つのパターンが使いこなせれば、もうどんなパターンが来ても大丈夫なはず。
最初はコピペでもいいのでアコーディオンメニューを思うように動かせるようになりましょう。
読み込み方がわからない人はコチラ【初心者向け】jQuery本体を読み込む方法
目次
アコーディオンメニューの作り方
基本形(矢印パターン)
まずは基本となるアコーディオンメニューを見てみましょう。
See the Pen
アコーディオン1 by toshi (@toshi78)
on CodePen.
基本形はすべてのメニューが開きます。
jQueryの部分を見てください。
クリックイベントを設定するには次の書き方でしたね。
$("[対象の要素]").on("click", function() {
/* 処理内容 */
});
そして処理内容には2行コードが書かれています。
ここでは次の点だけ頭に入れておきましょう。
- クリックする要素 → ”.js-accordion-title”
- 展開する要素 → ”.accordion-text”
HTML
<div class="accordion-container">
<dl class="accordion-list">
<dt class="accordion-title js-accordion-title">タイトル1タイトル1</dt><!-- /.accordion-title -->
<dd class="accordion-text"><p>テキスト1テキスト1テキスト1テキスト1</p></dd><!-- /.accordion-text -->
</dl><!-- /.accordion-list -->
<dl class="accordion-list">
<dt class="accordion-title js-accordion-title">タイトル2タイトル2</dt><!-- /.accordion-title -->
<dd class="accordion-text"><p>テキスト2テキスト2テキスト2テキスト2</p></dd><!-- /.accordion-text -->
</dl><!-- /.accordion-list -->
<dl class="accordion-list">
<dt class="accordion-title js-accordion-title">タイトル3タイトル3</dt><!-- /.accordion-title -->
<dd class="accordion-text"><p>テキスト3テキスト3テキスト3テキスト3</p></dd><!-- /.accordion-text -->
</dl><!-- /.accordion-list -->
</div><!-- /.accordion-container -->
javascript(jQuery)で動かす要素は「js-accordion-title」というCSSと別クラスをつけています。
CSS
.accordion-container {
margin: 50px auto 0;
max-width: 500px;
width: 100%;
}
.accordion-list:not(:first-child) {
margin-top: 10px;
}
.accordion-title {
background: #DDD;
cursor: pointer;
font-size: 16px;
padding: 20px 40px;
position: relative;
}
.accordion-title:after {
position: absolute;
display: block;
content: '';
top: 35%;
right: 22px;
width: 8px;
height: 8px;
border-top: 2px solid #000;
border-right: 2px solid #000;
transform: rotate(135deg);
transition: all .3s ease-in-out;
}
.accordion-title.open:after {
transform: rotate(-45deg);
top: 45%;
}
.accordion-text {
border-left: 1px solid #DDD;
border-right: 1px solid #DDD;
border-bottom: 1px solid #DDD;
display: none;
padding: 20px 40px;
}
accordion-textをdisplay: none;
テキスト部分は最初は非表示にしておいて、jQueryを使って表示させます。
accordion-titleにopenクラスがついたときの処理を書いておく
あとでjQueryのtoggleClassによって「open」クラスがつきます。
要は「open」クラスがついたときには矢印の向きを変えるようにしています。
jQuery
$(function () {
/*タイトルをクリックすると*/
$(".js-accordion-title").on("click", function() {
/*クリックした隣の要素を開閉する*/
$(this).next().slideToggle(200);
/*タイトルにopenクラスの追加、削除を行って矢印の向きを変える*/
$(this).toggleClass("open",200);
});
});
- 「this」は「js-accordion-title」のこと
- 「next」は隣の要素(=accordion-text)のこと
- slideToggle()はslideUpとslideDownを交互に行う
- toggleClassはクラスの追加と削除を切り替える
- (200)はアニメーションの時間(200だと0.2秒)
コードのかたまりで見るとどうなっているのかわかりにくいjQueryも、それぞれをわけて考えるとどういう動きをしているのかが見えてきます。
基本形(プラス・マイナスパターン)
これは矢印がプラス・マイナスに変わっただけでjQueryの書き方は同じです。
See the Pen
アコーディオン4 by toshi (@toshi78)
on CodePen.
CSSは今回は解説しませんが、矢印もプラス・マイナスも疑似要素を上手く使っています。
基本形(FAQパターン)
これもCSSが違うだけでjQueryの書き方は同じです。(HTMLのclass名も変えています。)
See the Pen
アコーディオン2 by toshi (@toshi78)
on CodePen.
ひとつ開けたら他は閉じる(矢印パターン)
See the Pen
Untitled by toshi (@toshi78)
on CodePen.
jQueryのコードが少し複雑になります。
$(function () {
/*タイトルをクリックすると*/
$(".js-accordion-title").on("click", function() {
/*クリックしたjs-accordion-title以外のopenクラスを削除*/
$(".js-accordion-title").not(this).removeClass("open");
/*クリックしたjs-accordion-title以外の要素を閉じる*/
$(".js-accordion-title").not(this).next().slideUp(200);
/*クリックしたjs-accordion-titleにopenクラスを付与*/
$(this).toggleClass("open");
/*js-accordion-titleの隣の要素であるaccordion-textを開閉*/
$(this).next().slideToggle(200);
});
});
- not()は除外対象の要素を指定
- not(this)はクリックした.js-accordion-title以外という意味
- removeClass()は外すclass名を指定
ひとつ開けたら他は閉じる(プラス・マイナスパターン)
See the Pen
Untitled by toshi (@toshi78)
on CodePen.
jQueryは上と同じです。
最初のコンテンツは開いておく
See the Pen
アコーディオン6 by toshi (@toshi78)
on CodePen.
これは最初にあったアコーディオンメニューのコードに2行追加します。
$(function () {
$(".accordion-list:first-of-type .accordion-text").css("display", "block");
$(".accordion-list:first-of-type .accordion-title").addClass("open");
$(".accordion-title").on("click", function () {
$(this).next().slideToggle(200);
$(this).toggleClass("open", 200);
});
});
- css() → .css(プロパティ,値)でcssプロパティを指定
/*最初のコンテンツは表示する*/
$(".accordion-list:first-of-type .accordion-text").css("display", "block");
/*最初の矢印の向きを開いている状態に変えておく*/
$(".accordion-list:first-of-type .accordion-title").addClass("open");
最初のコンテンツは開いておく + ひとつ開けたら他は閉じる
See the Pen
アコーディオン7 by toshi (@toshi78)
on CodePen.
これまでの合せ技で書けるはずです。
まとめ:アコーディオンメニューを使いこなそう!
コピペでもちゃんと動いていればいいですがいざ不具合があったとき、ソースが読めなければ手も足も出ません。
やはりコードの理解はしておくに越したことはないです。
一度は自分でしっかり噛み砕いて理解しておきたいですね。
投稿者 トシ
コメントを残す