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 коддорун өзүңүзгө көчүрүп алыңыз. Спойлерлердин сүрөттөлгөн иштерин ишке ашырыңыз.