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

html<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ą:

html<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ą:

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