アコーディオンメニューの開くボタン・閉じるボタンをCSSのみで作成しています。形状は開くボタンが下向き矢印、閉じるボタンが上向き矢印です。画像は使用していません。
よくあるご質問(FAQ)をサンプルにしています。
- 質問1の内容「ダミーテキストダミーテキストダミーテキストダミーテキスト」
- 質問1の答え「ダミーテキストダミーテキストダミーテキストダミーテキスト」
- 質問2の内容「ダミーテキストダミーテキストダミーテキスト」
- 質問2の答え「ダミーテキストダミーテキストダミーテキスト」
- 質問3の内容「ダミーテキストダミーテキスト」
- 質問3の答え「ダミーテキストダミーテキスト」
- 質問4の内容「ダミーテキスト」
- 質問4の答え「ダミーテキスト」
- 質問5の内容「ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト」
- 質問5の答え「ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト」
htmlのコードは下記になります。
質問に対する答えを定義リストでマークアップしています。
<dl>
<dt class="Q"><span>質問1の内容「ダミーテキスト」</span></dt>
<dd class="A">質問1の答え「ダミーテキスト」</dd>
<dt class="Q"><span>質問2の内容「ダミーテキスト」</span></dt>
<dd class="A">質問2の答え「ダミーテキスト」</dd>
<dt class="Q"><span>質問3の内容「ダミーテキスト」</span></dt>
<dd class="A">質問3の答え「ダミーテキスト」</dd>
<dt class="Q"><span>質問4の内容「ダミーテキスト」</span></dt>
<dd class="A">質問4の答え「ダミーテキスト」</dd>
<dt class="Q"><span>質問5の内容「ダミーテキスト」</span></dt>
<dd class="A">質問5の答え「ダミーテキスト」</dd>
</dl>
続いてCSSのコードです。
開くボタン・閉じるボタンはspanタグの疑似要素で指定しています。開くボタンはborder-rightとborder-bottomをtransformで45度回転させて下向き矢印にしています。閉じるボタンは225度回転させて上向き矢印にしています。transitionを設定していますので、開くボタンが180度回転して閉じるボタンになるよう動作します。
また、質問の答えのddタグは非表示にしています。
dl dt {
position: relative;
padding: 0 0 10px 1.6em;
font-size: 14px;
line-height: 1.5;
}
dl dt:before {
content: "Q :";
position: absolute;
top: 0;
left: 0;
}
dl dt span {
display: inline-block;
text-decoration: underline;
cursor: pointer;
}
dl dt span:after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin: 0 0 0 .5em;
vertical-align: middle;
box-sizing: border-box;
border-right: solid 2px #8f97a6;
border-bottom: solid 2px #8f97a6;
transform: rotate(45deg);
transition: 0.2s;
}
dl dt.selected span:after {
margin: 3px 0 0 .5em;
transform: rotate(225deg);
transition: 0.2s;
}
dl dd {
display: none;
position: relative;
margin: 0;
padding: 0 0 15px 1.6em;
font-size: 14px;
line-height: 1.5;
color: #666;
}
dl dd:before {
content: "A :";
position: absolute;
top: 0;
left: 0;
}
最後にjQueryのコードです。
質問のテキストであるspanタグをクリックでdtタグにクラス名selectedを付与、再度質問のテキストをクリックでクラス名selectedを削除しています。
$(function(){
$('.Q > span').click(function(){
$($(this).parent('.Q')).toggleClass('selected');
$($(this).parent('.Q')).next('.A').slideToggle('fast');
});
});