JavaScriptда спойлер

Ҳозир биз спойлерларни қандай қилишни ўрганамиз. Спойлерлар деганда, мен maxsus ҳаволa ёрдамида йиғиш ёки ёйиш мумкин бўлган блокларни назарда тутамиз.

Куйидаги код мисолида spoiler синфи бўлган абзац спойлер бўлиб, toggle синфи бўлган ҳаволa босилганда ушбу спойлерни кўрсатиши ёки бекитиши керак:

<p>
	матн бўлган абзац
	<a href="" class="toggle">ёйиш</a>
</p>
<p class="spoiler">
	бекитилган спойлер
</p>
<p>
	матн бўлган абзац
</p>

Матнда, албатта, кўп спойлерлар бўлиши мумкин ва ҳар бирининг ўз ҳаволaси бўлиши керак:

<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>

Аниқки, ёйиш учун бўлган ҳаволa ва спойлернинг ўзини қандайдир боглаш керак. Турли variantларни тўғрилаш мумкин, лекин бу ҳолатда мен joyлашуви бўйича қилишни таклиф қиламан: айтайлик, toggle синфи бўлган ҳаволa ўз отасининг joyидан keyин darhol joyлашган spoiler синфи бўлган elementни очади ёки бекади.

Спойлер андоза бўйича бекитилган бўлсин, ва агар биз уни кўрсатмоқчи бўлсак - унга active синфини беремиз. Мос CSS кодини ёзамиз:

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

Келтирилган HTML ва CSS кодларни нусxa кўчириб олинг. Спойлерларнинг тавсифланган ишини амалга оширинг.