Skaidula su JavaScript

Dabar mes išmoksime daryti skaidulas. Po skaidulomis aš suprantu blokus, kuriuos galima išskleisti arba suskleisti naudojant specialią nuorodą.

Kitame kodo pavyzdyje pastraipa su klase spoiler yra skaidula, o nuoroda su klase toggle turėtų paspaudimu parodyti arba paslėpti šią skaidulą:

<p>
	pastraipa su tekstu
	<a href="" class="toggle">išskleisti</a>
</p>
<p class="spoiler">
	paslėpta skaidula
</p>
<p>
	pastraipa su tekstu
</p>

Tekste, žinoma, gali būti daug skaidulų ir kiekviena turi turėti savo nuorodą:

<p>
	pastraipa su tekstu
</p>
<p>
	pastraipa su tekstu
	<a href="" class="toggle">išskleisti skaidulą 1</a>
</p>
<p class="spoiler">
	paslėpta skaidula 1
</p>
<p>
	pastraipa su tekstu
</p>
<p>
	pastraipa su tekstu
	<a href="" class="toggle">išskleisti skaidulą 2</a>
</p>
<p class="spoiler">
	paslėpta skaidula 2
</p>
<p>
	pastraipa su tekstu
</p>

Akivaizdu, kad išskleidimo nuorodą ir pačią skaidulą reikia kaip nors susieti. Galima sugalvoti įvairius variantus, bet šiuo atveju aš siūlau daryti pagal vietą: tarkime, kad nuoroda su klase toggle atveria arba uždaro elementą su klase spoiler, esantį iškart po šios nuorodos tėvinio elemento.

Tegul skaidula pagal numatytuosius nustatymus yra paslėpta, o jei norime ją parodyti - suteiksime jai klasę active. Parašykime atitinkamą CSS kodą:

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

Nukopijuokite pateiktą HTML ir CSS kodą sau. Įgyvendinkite aprašytą skaidulų veikimą.