よくあるアコーディオンを実装するためのコードです。

仕様

• 見た目はリスト風
• 項目名をクリックすると、その下のコンテンツが開閉する
• 別の項目をクリックした際に、既に開いているコンテンツは閉じる

HTML

<div class="acc_wrap">
	<div class="acc_title">コンテンツ 1</div>
	<ul class="acc_content">
		<li>コンテンツ 1-1</li>
		<li>コンテンツ 1-2</a></li>
		<li>コンテンツ 1-3</a></li>
		<li>コンテンツ 1-4</a></li>
	</ul>
	<div class="acc_title">コンテンツ 2</div>
	<ul class="acc_content">
		<li>コンテンツ 2-1</li>
		<li>コンテンツ 2-2</a></li>
		<li>コンテンツ 2-3</a></li>
		<li>コンテンツ 2-4</a></li>
	</ul>
	<div class="acc_title">コンテンツ 3</div>
	<ul class="acc_content">
		<li>コンテンツ 3-1</li>
		<li>コンテンツ 3-2</a></li>
		<li>コンテンツ 3-3</a></li>
		<li>コンテンツ 3-4</a></li>
	</ul>
	<div class="acc_title">コンテンツ 4</div>
	<ul class="acc_content">
		<li>コンテンツ 4-1</li>
		<li>コンテンツ 4-2</a></li>
		<li>コンテンツ 4-3</a></li>
		<li>コンテンツ 4-4</a></li>
	</ul>
</div>

.acc_wrap	アコーディオン全体を囲うラッパー
.acc_title	各項目のタイトル（押すと下の.acc_contentが開閉する）
.acc_content	アコーディオンに格納するコンテンツ

CSS

.acc_wrap{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	width: 300px;
	margin: 20px auto 0;
	border: 1px solid #333;
}
.acc_title{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	padding: 0 10px;
	border-top: 1px solid #333;
	background: #fff;
	cursor: pointer;
}
.acc_title:first-of-type{
	border: none;
}
.acc_content{
	display: none;
	width: 100%;
	margin: 0; 
	padding: 0;
	list-style: none;
}
.acc_content li{
	box-sizing: border-box;
	width: 100%;
	padding: 10px;
	border-top: 1px solid #333;
	background: #ddd;
}
.acc_content li:not(:first-of-type){
	margin-top: -1px;
}

ラッパー、タイトル、コンテンツの各ボーダーが並んで幅がおかしくならないように、割と細かく制御しています。

また、横幅は300pxにしていますが、サイズや色はサイトに合わせて適宜変更してください。

jQuery

$(".acc_title").click(function() {
	$(".acc_title.open").not(this).removeClass("open");
	$(".acc_content:visible").not($(this).next(".acc_content")).slideUp();
	$(this).toggleClass("open");
	const content = $(this).next(".acc_content");
	if (content.is(':visible')) {
		content.slideUp();
	} else {
		content.slideDown();
	}
});

実際の動作

See the Pen Untitled by Leo_8192 (@Leo_8192) on CodePen.