JavaScript-এ স্পয়লার

এখন আমরা শিখব কিভাবে স্পয়লার তৈরি করতে হয়। স্পয়লার বলতে আমি এমন ব্লক বোঝাই যেগুলোকে একটি বিশেষ লিঙ্কের মাধ্যমে বিস্তৃত বা সংকুচিত করা যায়।

নিম্নলিখিত কোড উদাহরণে, ক্লাস সহ spoiler সহ প্যারাগ্রাফটি একটি স্পয়লার, এবং ক্লাস toggle সহ লিঙ্কটিকে ক্লিক করলে এই স্পয়লারটি দেখানো বা লুকানো উচিত:

<p>
	লেখাসহ প্যারাগ্রাফ
	<a href="" class="toggle">বিস্তৃত করুন</a>
</p>
<p class="spoiler">
	লুকানো স্পয়লার
</p>
<p>
	লেখাসহ প্যারাগ্রাফ
</p>

অবশ্যই, পাঠ্যে অনেক স্পয়লার থাকতে পারে এবং প্রত্যেকের নিজস্ব লিঙ্ক থাকা উচিত:

<p>
	লেখাসহ প্যারাগ্রাফ
</p>
<p>
	লেখাসহ প্যারাগ্রাফ
	<a href="" class="toggle">স্পয়লার 1 বিস্তৃত করুন</a>
</p>
<p class="spoiler">
	লুকানো স্পয়লার 1
</p>
<p>
	লেখাসহ প্যারাগ্রাফ
</p>
<p>
	লেখাসহ প্যারাগ্রাফ
	<a href="" class="toggle">স্পয়লার 2 বিস্তৃত করুন</a>
</p>
<p class="spoiler">
	লুকানো স্পয়লার 2
</p>
<p>
	লেখাসহ প্যারাগ্রাফ
</p>

স্পষ্টতই, বিস্তৃত করার লিঙ্ক এবং স্পয়লার自身কে কোনভাবে সংযুক্ত করতে হবে। বিভিন্ন বিকল্প ভাবা যায়, কিন্তু এই ক্ষেত্রে আমি অবস্থানের ভিত্তিতে করতে প্রস্তাব করছি: ধরা যাক, ক্লাস toggle সহ লিঙ্কটি খোলে বা বন্ধ করে ক্লাস spoiler সহ এলিমেন্টটি, যেটি এই লিঙ্কের প্যারেন্টের ঠিক নিচে অবস্থিত।

ধরা যাক স্পয়লারটি ডিফল্টরূপে লুকানো থাকে, এবং যদি আমরা এটি দেখাতে চাই - তাহলে আমরা এটিকে ক্লাস active দেব। আসুন সংশ্লিষ্ট CSS কোড লিখি:

.spoiler:not(.active) {
	display: none;
}

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