JavaScript-de spoyler

Häzir biz spoylerleri nädip ýasamaly bolar öwreneris. Spoylerler diýip men, aýratyn çykgyt ýardymy bilen açylýan ýa-da ýapylýan bloklary düşünýärin.

Aşakdaky kod nusgasynda, spoiler klassy bilen abzas spoyler bolup, toggle klassy bilen çykgyt bolsa tyklanda bu spoyleri görkezmeli ýa-da gizlemeli:

html<p>
  tekstli abzas
  <a href="" class="toggle">aç</a>
</p>
<p class="spoiler">
  gizlenen spoyler
</p>
<p>
  tekstli abzas
</p>

Tekstde, elbetde, köp spoylerler bolup biler we olaryň her biriniň öz çykgydy bolmaly:

html<p>
  tekstli abzas
</p>
<p>
  tekstli abzas
  <a href="" class="toggle">1-nji spoyleri aç</a>
</p>
<p class="spoiler">
  gizlenen spoyler 1
</p>
<p>
  tekstli abzas
</p>
<p>
  tekstli abzas
  <a href="" class="toggle">2-nji spoyleri aç</a>
</p>
<p class="spoiler">
  gizlenen spoyler 2
</p>
<p>
  tekstli abzas
</p>

Aç-ýaý etmek üçin çykgydy we spoyleriň özüni nähili bir baglanyşdyrmaly. Ähtimallar tapyp bolýar, ýöne bu ýagdaýda men ýerleşişi boýunça etmekli teklip edýärin: diýeliň, toggle klassy bilen çykgyt spoiler klassy bilen elementi açýar ýa-da ýapýar, şol çykgydyň ata-enesiniň derrew aşagynda ýerleşýän.

Spoyler bellenen ýagdaýda gizlenen bolsun, we eger biz ony görkezmek islesek - oňa active klassy bereris. Degişli CSS kody ýazalyň:

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