JSで作ったアコーディオン

JQueryを使ったアコーディオン

クリックで展開、ひとつ開くと他が閉じる & CLOSE ボタンで閉じることもできるタイプ

menu□□□□□ □□□□□□□について
□□□□□□□□ □□□□□□ □□□□□□□□□□です。

CLOSE

menu演奏音たてへぶんへぐるぐる野たですると大きなたたというセロたについて
□□□□□□□□ □□□□□□ □□□□□□□□□□です。

CLOSE

menu演奏音たてへぶんへぐるぐる野たですると大きなたたというセロた。俄たらだを長いはたましも小麦のいやたての所をもまるでセロですたて、などセロにしはすりでし。 しいただい何は小太どの顔のセロ勢にについて
□□□□□□□□ □□□□□□ □□□□□□□□□□です。

CLOSE

menu□□□□□□□□ □□□□について
□□□□□□□□ □□□□□□ □□□□□□□□□□です。

CLOSE


<dl class="jq-accordion">

	<dt class="ac-head"><span class="material-symbols-outlined">menu</span> □□□□□□□□□□□□ですか。</dt>
	<dd class="ac-body">
		□□□□□□□□□□□□□□□□□□□□□□□□です。
		<p class="ac-closeButton">CLOSE</p>
	</dd>

	<dt class="ac-head"><span class="material-symbols-outlined">menu</span> □□□□□□□□□□□□ですか。</dt>
	<dd class="ac-body">
		□□□□□□□□□□□□□□□□□□□□□□□□です。
		<p class="ac-closeButton">CLOSE</p>
	</dd>

</dl>


.jq-accordion {
	width: 100%;
	margin: 0 auto;
	}
.jq-accordion dt {
	font-weight: normal;
	}

.ac-head {
	position: relative;
	margin: 0 0 2px;
	padding: 1.5rem 1rem;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #fff;
	background: #eee;
	cursor: pointer;
	transition: .5s;
	}
.ac-head:before {
	position: absolute;
	top: 25%;
	right: 3rem;
	content: '';
	width: 24px;
	height: 24px;
	transform: rotate(135deg)!important;
	transition: all .5s;
	border-top: 2px solid #ccc;
	border-right: 2px solid #ccc;
	background: none;
	}

.ac-head.ac-open {
	margin: 0 0 2px;
	padding: 2.2rem 1rem;
	color: #fff;
	background: #aaa;
	}
.ac-head.ac-open:before {
	top: 40%;
	transform: rotate(-45deg)!important;
	transition: .5s;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	background: #999;
	}

.ac-body {
	line-height: 1.8;
	margin: 0 auto 2rem;
	padding: 1.6rem 1rem 1rem;
	border-bottom: 1px solid #ccc;
	background-color: #f6f6f6;
	}


$(function () {
	$('.ac-body').css("display", "none");
	$('.ac-head').on('click', function () {
		$(this).toggleClass('ac-open');	
		$(".ac-head").not(this).removeClass("ac-open");
		$(this).next().slideToggle();
		$('.ac-head').not($(this)).next('.ac-body').slideUp();
	})
	$('.ac-closeButton').on('click', function () {
		$('.ac-head').removeClass('ac-open');	
		$(this).parent('.ac-body').slideUp();
	})
});

TOP