jQueryのtoggleで複数のアコーディオンを実装

完成形はこちら

HTMLはこちら

<div id="sampleBox_210527">
<!--1つ目-->
<dl class="toggleItem">
	<dt class="tlt">アイテム01</dt>
	<dd class="txtBox">
		<p class="txt">テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01</p>
	</dd>
</dl>
<!--//1つ目-->
<!--2つ目-->
<dl class="toggleItem">
	<dt class="tlt">アイテム02</dt>
	<dd class="txtBox">
		<p class="txt">テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02</p>
	</dd>
</dl>
<!--//2つ目-->
<!--3つ目-->
<dl class="toggleItem">
	<dt class="tlt">アイテム03</dt>
	<dd class="txtBox">
		<p class="txt">テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03</p>
	</dd>
</dl>
<!--//3つ目-->
<!--4つ目-->
<dl class="toggleItem">
	<dt class="tlt">アイテム04</dt>
	<dd class="txtBox">
		<p class="txt">テキスト04テキスト04テキスト04テキスト04テキスト04テキスト04テキスト04テキスト04テキスト04</p>
	</dd>
</dl>
<!--//4つ目-->
</div>

CSSはこちら

▼ PCはこちら

#sampleBox_210527 {
	margin-top: 60px;
}

#sampleBox_210527 .toggleItem:not(:first-child) {
	margin-top: 40px;
}

#sampleBox_210527 .toggleItem .tlt {
	display: block;
	text-align: left;
	background-color: lightgray;
	border-radius: 15px;
	cursor: pointer;
	font-weight: bold;
	padding: 30px 40px;
	font-size: 20px;
}

#sampleBox_210527 .toggleItem .txtBox {
	display: none;
}

#sampleBox_210527 .toggleItem .txtBox .txt {
	border: 1px dotted #000;
	margin-top: 30px;
	padding: 20px 40px;
}

▼ spはこちら

#sampleBox_210527 {
	margin-top: 40px;
}

#sampleBox_210527 .toggleItem:not(:first-child) {
	margin-top: 30px;
}

#sampleBox_210527 .toggleItem .tlt {
	display: block;
	text-align: left;
	background-color: lightgray;
	border-radius: 15px;
	cursor: pointer;
	font-weight: bold;
	padding: 10px 20px;
	font-size: 18px;
}

#sampleBox_210527 .toggleItem .txtBox {
	display: none;
}

#sampleBox_210527 .toggleItem .txtBox .txt {
	border: 1px dotted #000;
	margin-top: 20px;
	padding: 10px 20px;
}

jsはこちら

$(function() {
	//「toggleItem」の中の「tlt」をクリックしたら。
	$(".toggleItem .tlt").on("click", function() {
	//クリックされた「tlt」の次の要素を開閉。
	$(this).next().slideToggle();
	});
});