জাভাস্ক্রিপ্টে অ্যাকর্ডিয়ন

এখন আসুন একটি অ্যাকর্ডিয়ন বাস্তবায়ন করি। এটি ট্যাবগুলির মতো, পাশে উল্টে যায়। এতে অ্যাকর্ডিয়নে বর্তমান ট্যাব বন্ধ করা যেতে পারে, সক্রিয় লিঙ্কে ক্লিক করলে।

এখানে একটি নমুনা:

আমরা যে মার্কআপে সমস্যার সমাধান করব তা অধ্যয়ন করুন:

<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 কোড ট্যাবগুলোর তুলনায় অ্যাকর্ডিয়নের জন্য বেশি সুবিধাজনক: এতে লিঙ্কগুলি সরাসরি তাদের খোলা এবং বন্ধ করা স্পয়লারের উপরে অবস্থিত। তদতিরিক্ত, আমাদের মার্কআপে active ক্লাস লিঙ্ক এবং স্পয়লারের সাধারণ প্যারেন্টকে দেওয়া হয়।

এর মানে হল যে একটি লিঙ্কে ক্লিক করলে শুধু পুরানো ট্যাবটি নিষ্ক্রিয় করতে হবে এবং নতুনটি সক্রিয় করতে হবে। পুরানো ট্যাব নিষ্ক্রিয় করতে active ক্লাস সহ ট্যাবটি খুঁজে বের করতে হবে এবং এটি থেকে ক্লাসটি সরাতে হবে।

একটি নতুন ট্যাব সক্রিয় করতে, লিঙ্কে ক্লিক করার মাধ্যমে এই লিঙ্কের প্যারেন্ট ট্যাবটি খুঁজে বের করতে হবে এবং এটিকে active ক্লাস দিতে হবে। টেকনিক্যালি এই ধরনের অনুসন্ধান এভাবে করা যেতে পারে: শুধু লিঙ্কের নিকটতম প্যারেন্ট খুঁজে বের করতে হবে যার tab ক্লাস রয়েছে।

প্রদত্ত HTML এবং CSS কোডগুলি কপি করুন। বর্ণিত অ্যালগরিদম অনুসারে অ্যাকর্ডিয়নটি বাস্তবায়ন করুন।