Спойлер дар 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-и дарҷшударо ба худ нусхабардорӣ кунед. Коркарди дарҷшудаи спойлерҳоро татбиқ кунед.