जावास्क्रिप्ट में स्पॉइलर

अब हम सीखेंगे कि स्पॉइलर कैसे बनाएं। स्पॉइलर से मेरा मतलब उन ब्लॉक्स से है जिन्हें एक विशेष लिंक के माध्यम से विस्तारित या संकुचित किया जा सकता है।

निम्नलिखित उदाहरण कोड में, क्लास 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 कोड की प्रतिलिपि बनाएँ। स्पॉइलर के वर्णित कार्य को लागू करें।