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>

Ашудың сілтемесі мен спойлердің өзін әлдебir түрде байланыстыру керек. Әртүрлі нұсқаларды ойлап табуға болады, бірақ бұл жағдайда мен орналасуы бойынша жасауды ұсынамын: toggle класы бар сілтеме spoiler класы бар элементті ашады немесе жабады, ол осы сілтеменің ата-анасының астында орналасады.

Спойлер әдепкі бойынша жасырын болсын, ал егер біз оны көрсеткіміз келсе - оған active класын береміз. Сәйкес CSS кодты жазайық:

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

Келтірілген HTML және CSS кодтарды өзіңізге көшіріңіз. Сипатталған спойлерлер жұмысын жүзеге асырыңыз.