【js】jQueryでできるアコーディオンメニューの作成

はじめに

本記事はjQueryを使用した、アコーディオンパネルの作成についてご紹介します。
よくスマートフォンのWebサイトのデザインで見かけるアコーディオンパネルですが、仕組みがわからないまま使用しているかたもいらっしゃるのではないでしょうか？今回は解説を交えながら紹介します！

今回の記事で作成するでもはこちらになります

See the Pen Accordion by takashi yamakawa (@y_taka520) on CodePen.

HTML・CSSの準備

まずはアコーディオンパネルを実装する準備として縦並びに要素を配置します。今回は3つ配置します。

HTML

<div class="container-1">
<h2 class="ttl-1">Title 01</h2>
<div class="inner-1">
<h3>Title01</h3>
<p>ここに文字が入ります。ここに文字が入ります。ここに文字が入ります。</p>
<div class="btn">
<p>もっとくわしく</p>
</div>
</div>
</div>
<div class="container-2">
<h2 class="ttl-2">Title 02</h2>
<div class="inner-2">
<h3>Title02</h3>
<p>ここに文字が入ります。ここに文字が入ります。ここに文字が入ります。</p>
<div class="btn">
<p>もっとくわしく</p>
</div>
</div>
</div>
<div class="container-3">
<h2 class="ttl-3">Title 03</h2>
<div class="inner-3">
<h3>Title03</h3>
<p>ここに文字が入ります。ここに文字が入ります。ここに文字が入ります。</p>
<div class="btn">
<p>もっとくわしく</p>
</div>
</div>
</div>
<div class="container-1">
<h2 class="ttl-1">Title 01</h2>
<div class="inner-1">
<h3>Title01</h3>
<p>ここに文字が入ります。ここに文字が入ります。ここに文字が入ります。</p>
<div class="btn">
<p>もっとくわしく</p>
</div>
</div>
</div>
<div class="container-2">
<h2 class="ttl-2">Title 02</h2>
<div class="inner-2">
<h3>Title02</h3>
<p>ここに文字が入ります。ここに文字が入ります。ここに文字が入ります。</p>
<div class="btn">
<p>もっとくわしく</p>
</div>
</div>
</div>
<div class="container-3">
<h2 class="ttl-3">Title 03</h2>
<div class="inner-3">
<h3>Title03</h3>
<p>ここに文字が入ります。ここに文字が入ります。ここに文字が入ります。</p>
<div class="btn">
<p>もっとくわしく</p>
</div>
</div>
</div>

CSS

.container-1, .container-2, .container-3 {
padding:48px;
}
.container-1 {
background-color:#FBC418;
}
.container-2 {
background-color:#00649F;
}
.container-3 {
background-color:#259F6C;
}

.inner-1, .inner-2, .inner-3 {
margin:0 auto;
width:480px;
background-color:$white;
padding:32px;
box-shadow:0 2px 3px $gray;
}

.btn {
margin:24px auto;
width:200px;
height:60px;
background-color:#999;
color:#fff;
text-align:center;
line-height:60px;
box-shadow:0 1px 2px #gray;
}

screenshot-codepen.io-2017-12-21-15-18-11-155.png (52.2 kB)

これで要素が縦に3つ並びました。

次にこの要素の中の本文はクリックしたら表示する仕組みにしたいので、普段は表示しないように設定します。
display要素にnoneを指定します。

.inner-1, .inner-2, .inner-3 {
margin:0 auto;
width:480px;
background-color:$white;
padding:32px;
box-shadow:0 2px 3px $gray;
display:none;
}

screenshot-codepen.io-2017-12-21-15-20-09-025.png (10.8 kB)

これでHTMLとCSSの準備は完了です。

jQueryの記述

HTMLとCSSの記述が終わったらいよいよjQueryで動きを付けていきます。まずは一つ目の一番上にある要素に焦点をあててjQueryを記述していきます。

$(document).ready(function(){
$('.container-1').click(function(){
$('.inner-1').slideToggle(800);
$('.ttl-1').slideToggle(800);
});
});

記述したコードについて解説をしていきます。
まず、2行目でcontainer-1クリックしたら()内の処理を行うと宣言し、3、4行目で実際の処理を記述しています。
このslideToggle()とはslideUp()(要素をスライド表示させる関数)とslideDown()(要素をスライドで非表示にさせる関数)を交互に実行するという便利な関数です。これだけでも表示非表示の動きになるかと思います。

現在の状態では表示非表示の動作が不自然なので、より自然になるようにアニメーションを組み合わせていきます。
まずは先ほどのjavascriptに以下を書き足していきます。

$(document).ready(function(){
$('.container-1').click(function(){
$('.inner-1').slideToggle(800);
$('.inner-1').toggleClass('anime');
$('.inner-1').toggleClass('anime-reverse');
$('.ttl-1').slideToggle(800);
$('.ttl-1').toggleClass('anime');
$('.ttl-1').toggleClass('anime-reverse');
});
});

追加した行のtoggleClass()はaddClass()(要素にクラスを付与する関数)とremoveClass()(要素からクラスを外す関数)を交互に実行する関数です。先ほど出てきたslideToggle()と似たような性質をもっています。このほかにもtoggleとつく関数はいくつかあり、それらをうまく使うことでプログラムの行数を少なくすることができます。

次に先ほどtoggleClass()で指定した二つのクラスにアニメーションを追加します。

CSS

.anime {
animation : anime 2s ease;
}
.anime-reverse {
animation : anime-reverse 0.8s ease;
}

@keyframes anime {
0% {
filter:opacity(0);
margin-top:-32px
}
100% {
filter:opacity(1);
margin-top:0px;
}
}
@keyframes anime-reverse {
0% {
filter:opacity(1);
}
100% {
filter:opacity(0);
}
}

この二つのアニメーションにはそれぞれフェードインとフェードアウト二つのアニメーションを指定しており、これを先ほどのtoggleClass()で交互に付与することでアニメーションを実行しています。

残りの二つにも同様の処理を記述することで完成です。