JavaScript ဖြင့် အခန်းချုပ်များ (Accordion)

ယခု အခန်းချုပ်ကို အကောင်အထည်ဖော်ကြည့်ရအောင်။ ၎င်းဟာ ဘေးဘက်သို့ လှန်လိုက်သည့် စာမျက်နှာခွဲများနှင့် ဆင်တူပါသည်။ ထို့အပြင် အခန်းချုပ်တွင် တက်ကြွစွာရှိနေသော လင့်ခ်ကို နှိပ်ပါက ထိုစာမျက်နှာခွဲကို ပိတ်နိုင်ပါသည်။

ဤသည်မှာ နမူနာဖြစ်ပါသည်။

ကျွန်ုပ်တို့ပြဿနာကိုဖြေရှင်းမည့် HTML ဖွဲ့စည်းပုံကိုလည်း လေ့လာပါ။

<div id="parent">
	<div class="tab active">
		<div class="link">
			<a href="#" >စာမျက်နှာခွဲ 1</a>
		</div>
		<div class="text">
			စာမျက်နှာခွဲ 1 ၏စာသား
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >စာမျက်နှာခွဲ 2</a>
		</div>
		<div class="text">
			စာမျက်နှာခွဲ 2 ၏စာသား
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >စာမျက်နှာခွဲ 3</a>
		</div>
		<div class="text">
			စာမျက်နှာခွဲ 3 ၏စာသား
		</div>
	</div>
</div>

#parent {
	margin: 0 auto;
	width: 400px;
}
.tab {
	margin-bottom: 10px;
}

.tab .link a {
	display: block;
	padding: 10px;
	color: black;
	text-decoration: none;
	text-align: center;
	background: #f8f8f8;
	border: 1px solid gray;
}
.tab .link:hover a {
	background: #f2f2f2;
}

.tab:not(.active) .text {
	display: none;
}
.tab .text {
	border: 1px dashed gray;
	border-top: none;
	
	padding: 10px;
	height: 300px;
}

ဆွေးနွေးချက်

နည်းပညာအရ အခန်းချုပ်၏ HTML ကုဒ်သည် စာမျက်နှာခွဲများ၏ ကုဒ်ထက် ပိုမိုအဆင်ပြေပါသည်။ ၎င်းတွင် လင့်ခ်များသည် ၎င်းတို့ဖွင့်မည့် (သို့) ပိတ်မည့် စာသားအပိုဒ် (spoiler) များ၏ တိုက်ရိုက်အပေါ်တွင်တည်ရှိပါသည်။ ထို့အပြင် ကျွန်ုပ်တို့၏ HTML ဖွဲ့စည်းပုံတွင် active class ကို လင့်ခ်နှင့် စာသားအပိုဒ်၏ အထွေထွေမိဘ element ကိုပေးထားပါသည်။

ဆိုလိုသည်မှာ လင့်ခ်ကိုနှိပ်လိုက်သည်နှင့် ယခင် စာမျက်နှာခွဲကို မလှုပ်ရှားအောင်လုပ်ပြီး အသစ်ကို လှုပ်ရှားအောင်လုပ်ရုံသာဖြစ်ပါသည်။ ယခင် စာမျက်နှာခွဲကို မလှုပ်ရှားအောင်လုပ်ရန် active class ပါသော စာမျက်နှာခွဲကိုရှာပြီး ၎င်းမှ class ကိုဖယ်ရှားရမည်။

စာမျက်နှာခွဲအသစ်ကို လှုပ်ရှားအောင်လုပ်ရန် လင့်ခ်ကိုနှိပ်လိုက်ခြင်းဖြင့် ထိုလင့်ခ်၏ မိဘ စာမျက်နှာခွဲကိုရှာပြီး ၎င်းကို active class ပေးရမည်။ နည်းပညာအရ ထိုကဲ့သို့ရှာဖွေမှုကို ဤသို့လုပ်ဆောင်နိုင်သည်။ tab class ရှိသော လင့်ခ်၏ အနီးဆုံး မိဘ element ကို ရှာပါ။

ပေးထားသော HTML နှင့် CSS ကုဒ်များကို မိမိတို့ထံသို့ ကူးယူပါ။ ဖော်ပြထားသော အယ်လ်ဂိုရစ်သမ်အတိုင်း အခန်းချုပ်ကို အကောင်အထည်ဖော်ပါ။