この記事では，アコーディオンメニューの作り方について紹介します．
アコーディオンメニューとは，クリックしたら中身が表示されて，もう一度，クリックすると，中身が隠れるアコーディオンのような動きをするメニューのことです．
こんにちは1
と〜げ
ちなみに，これは，このブログのテーマ（Sango）のショートコードを使っています．
今回は，jQueryでのアコーディオンメニューの作り方を紹介していきます．
と〜げ
ただし，詳しい作り方を説明せず，ここでは，私が作成したサンプルコードと，私が実際に使った作り方の学び方ついて紹介します．
アコーディオンメニューの作り方
サンプルコード
こちらが，jQueryで作ったアコーディオンメニューです．
See the Pen
AccordionbyjQuery by Yoshitaka (@YOSHITAKA3)
on CodePen.
htmlファイル：index.html
<!doctype html>
-
-
クリックして表示1
+
こんにちは1
-
-
-
クリックして表示2
+
こんにちは2
-
-
-
クリックして表示3
+
こんにちは3
-
cssファイル：style.css
.wrapper {
background-color: #fff;
text-align: center;
padding-top:20px;
padding-bottom: 20px;
color: #5f5d60;
}
#list {
width: 180px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.list-item {
margin:10px;
border-bottom:1px solid #ccc;
position:relative;
cursor:pointer;
text-align: left;
}
.list-item h3 {
font-size: 14px;
}
.list-item span {
position:absolute;
top:-3px;
right:5px;
color:#ccc;
font-size:18px;
}
.answer {
font-size: 12px;
padding: 5px 0px;
margin-bottom: 15px;
display:none;
}
jsファイル：script.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('-') ;
}
});
});
学び方
私は，progateのjQueryの中級編で学びました．意外にも数時間で作れるようになりました．
他にも，cssでのみで作る方法や，Bootstrapを使って作る方法があります．
