<div class="wrap">
 	<div class="questionList">
 		<div class="question">
 			<h2>領域大會,好友竟然。</h2>
 			<p>並不是事故,股份有限公司,男生諾基亞漂。</p>
 		</div>

 		<div class="question">
 			<h2>錯誤農業改造,立刻表情,您可以採取,時。</h2>
 			<p>所有人傢俱韓國一半,環境保存不能下載眼神,國務院對付權力休。</p>
 		</div>

 		<div class="question">
 			<h2>女孩反正表演相應大家,戀愛如。</h2>
 			<p>不能照顧也可輕鬆逐漸效率故事機場百度,權益精靈回頭瀏覽醫療激動一年,大門完成所。</p>
 		</div>
 	</div>
 </div>
//color
$primary: #3d82ad;
$white: #fff;
$text: #333;
$blue: #5fbfff;
$green: #00aa00;
$yellow: #f3da9a;
$orange: #ff8800;
$pink: #faaad1;
$red: #fa5858;
$darkRed: #a11313;

//layout
body {
	box-sizing: border-box;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif, "微軟正黑體";
}

.wrap {
	width: 500px;
	margin: 0 auto;
}

.question {
	h2 {
		color: $primary;
		border: 1px solid $primary;
		padding: 10px 5px;
		margin-bottom: 10px;
		margin-top: 10px;
		&:hover {
			background-color: $primary;
			color: $white;
		}
		&.active {
			p {
				display: block;
			}
		}
	}
	p {
		display: none;
		line-height: 1.5;
	}
}
View Compiled
$(function () {
	$(".question h2").click(function (e) {
		e.preventDefault();
		//在 h2 上動態新增 class
		$(this).toggleClass("active");
		//h2 在父層元素中,找到 p 元素,並且給它滑動效果
		$(this).parent().find("p").slideToggle();
		//h2 在父層 .question 元素中,找到其他 .question 同層元素,再找到該同層元素的 p 標籤,並向上收闔
		$(this).parent().siblings().find("p").slideUp();
		//h2 在父層 .question 元素中,找到其他 .question 同層元素,再找到該同層元素的 h2 標籤,並動態移除 class
		$(this).parent().siblings().find("h2").removeClass("active");
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js