【アコーディオンメニュー】開くボタン・閉じるボタンをCSSのみで作成【矢印編】

アコーディオンメニューの開くボタン・閉じるボタンを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');
	});
});
タイトルとURLをコピーしました