「ul・li」を使ったシンプルなアコーディオンを作ります。
タイトルをクリックすると、アニメーションで内容が展開され、もう一度クリックすると閉じられます。
「＋マーク」と「×マーク」もアニメーションで切り替わるようにしています。
◆まずはデモページをご覧ください。
デモページを見るHTML
<li>
<div class="title">タイトル</div>
<div class="box">
<p>内容が入ります。</p>
</div>
</li>
<li>
<div class="title">タイトル</div>
<div class="box">
<p>内容が入ります。</p>
</div>
</li>
</ul>
CSS
margin: 30px 0;
border: 1px solid #ccc;
}
.title {
position: relative;
padding: 15px 50px;
cursor: pointer;
}
/*＋アイコン*/
.title::before,
.title::after{
position: absolute;
content:'';
width: 15px;
height: 2px;
background-color: #666;
transition: all .2s ease;
}
.title::before{
top:48%;
left: 15px;
transform: rotate(0deg);
}
.title::after{
top:48%;
left: 15px;
transform: rotate(90deg);
}
/*closeというクラスがついたら×に変化*/
.title.close::before{
transform: rotate(45deg);
}
.title.close::after{
transform: rotate(-45deg);
}
.box {
display: none;/*はじめは非表示*/
margin: 0 20px 20px;
padding: 20px;
background: #f4f4f4;
}
JavaScirpt
var findElm = $(this).next(".box");//boxエリアを取得する
$(findElm).slideToggle();//アコーディオン
if($(this).hasClass('close')){//タイトルにクラス名「close」があれば
$(this).removeClass('close');//クラス名を除去
}else{
$(this).addClass('close');//クラス名「close」を付与
}
});
スマホにも対応しているので、シンプルなアコーディオンを設置する場合にいかがでしょうか。