アコーディオンをjQueryで実装する
アコーディオンとは？
クリックすると表示・非表示が切り替わる機能のことです。
例：Workship(https://goworkship.com/)
クリック前
クリック後
筆者の環境
エディター・・・Visual Studio Code
ブラウザ・・・Google Chrome
UNIX端末エミュレータ・・・ターミナル
OS・・・Mac
準備
ディレクトリ・ファイルの作成(ターミナルを使用)
MacBook-Pro:~ shibatahiroshitaka$ mkdir accordion
MacBook-Pro:~ shibatahiroshitaka$ cd accordion
MacBook-Pro:accordion shibatahiroshitaka$ touch index.html style.html query.js
「accordion」というフォルダを作成し、移動します。
次に、「index.html」と「style.css」、「query.js」を作成します。
「style.html」としてしまっていたので・・・
修正します。
MacBook-Pro:accordion shibatahiroshitaka$ mv style.html style.css
HTML
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="query.js"></script>
</head>
<body>
<div class="question">Q 営業時間は、何時から何時ですか？</div>
<div class="answer">A 月曜日から金曜日の10:00〜20:00です。</div>
</body>
</html>
headタグ内では、文字化けを防ぎ、「style.css」を読み込み、jQueryを使う記述をし、「query.js」を読み込んでいます。
bodyタグ内には、質問と答えを書いておきます。
コマンド(⌘) + O で、index.htmlを開きます。
画面(1/10)
CSS
style.css
.accordion {
font-size: 20px;
background-color: rgba(204,204,204,0.4);
border-radius: 10px;
padding: 5px;
position: absolute;
left: 500px;
cursor: pointer;
}
.question {
top: 300px;
}
.answer {
top: 360px;
}
このようなスタイルを当てます。
画面(2/10)
jQuery
jQueryの読み込み確認
query.js
$(function(){
console.log('OK');
});
コマンド(⌘) + option + J で、google検証ツールのConsoleが開きます。
画面をリロードすると、OKと表示されているので、jQueryが反応しています。
1つのアコーディオン
準備が出来たので、アコーディオンの実装に入っていきます。
答えを非表示にする
答えの部分をデフォルトで非表示にします。
style.css
.answer {
top: 360px;
display: none;
}
画面(3/10)
答えを隠す
query.js
$(function(){
$('.question').click(function(){
$('.answer').slideDown();
})
});
"質問をクリックしたら、答えがスライドダウンする・・・" という動きを記述します。
画面(4/10)
答えを表示させる
query.js
$(function(){
$('.question').click(function(){
$('.answer').slideDown();
})
$('.answer').click(function(){
$('.answer').slideUp();
})
});
今度は、"答えをクリックしたら、答えがスライドアップする・・・"という動きを記述します。
画面(5/10)
複数のアコーディオン
最後に、複数のQ&Aがある場合を実装していきます。
見た目を作る
index.html
<body>
<ul id="q-and-a__list">
<li class="list-item">
<div class="accordion question">Q 営業時間は、何時から何時ですか？</div>
<span>+</span>
<div class="accordion answer">A 月曜日から金曜日の10:00〜20:00です。</div>
</li>
<li class="list-item">
<div class="accordion question">Q タバコは吸えますか？</div>
<span>+</span>
<div class="accordion answer">A 恐れ入りますが、禁煙となっております。</div>
</li>
<li class="list-item">
<div class="accordion question">Q 一番混む時間帯を教えてください。</div>
<span>+</span>
<div class="accordion answer">A 休日の11:00〜13:00です。</div>
</li>
</ul>
</body>
<ul>の中に<li>が3つあるという構造にしました。
画面(6/10)
style.css
#q-and-a__list {
width: 500px;
list-style: none;
}
.list-item {
margin: 10px;
border-bottom: 1px solid #ccc;
position: relative;
cursor: pointer;
text-align: left;
}
.list-item span {
position: absolute;
top: 0;
right: 5px;
color: #ccc;
}
.question {
margin-bottom: 15px;
}
.answer {
display: none;
padding: 5px 0;
margin-bottom: 5px;
}
画面(7/10)
画面(8/10)
現在、質問をクリックすると全ての答えが表示されています。
これを修正します。
個別にアコーディオンを発生させる
query.js
$(function(){
$('.list-item').click(function(){
var $answer = $(this).find('.answer');
if($answer.hasClass('open')){
$answer.removeClass('open');
$answer.slideUp();
}else {
$answer.addClass('open');
$answer.slideDown();
}
});
});
thisは.list-item・・・つまり、一つ一つのQ&Aです。
そこから.answer・・・つまり、答えを探して$answerに代入しています。
それを使用し、もし答えの部分がopenというクラスを持っていたら、openを外し、答えをスライドアップさせる(隠す)
持っていなかったら、openというクラスを付けて、答えをスライドダウンさせる(表示させる)
という処理を書いています。
そもそも答えの部分は、openというクラスを持っていないので、最初はelseの処理(openというクラスを持っていない時の処理)が実行されます。
画面(9/10)
+ と - を置き換える
query.js
$(function(){
$('.list-item').click(function(){
var $answer = $(this).find('.answer');
if($answer.hasClass('open')){
$answer.removeClass('open');
$answer.slideUp();
$(this).find('span').text('+');
}else {
$answer.addClass('open');
$answer.slideDown();
$(this).find('span').text('-');
}
});
});
答えがスライドダウン(表示)された時は、＋が - に変わり、
答えがスライドアップした時は、- が + に変わる・・・という動きを書きました。
画面(10/10)
