JavaScript-ի Սպոյլեր

Այժմ մենք կսովորենք, թե ինչպես պատրաստել սպոյլերներ։ Սպոյլերներ ասելով՝ ես հասկանում եմ այն բլոկները, որոնք կարելի է ընդլայնել կամ ծալել հատուկ հղման միջոցով։

Հաջորդ օրինակում՝ spoiler դասով պարագրաֆը սպոյլեր է, իսկ toggle դասով հղումը կլիկի դեպքում պետք է ցույց տա կամ թաքցնի այդ սպոյլերը։

html<p>
  տեքստով պարագրաֆ
  <a href="" class="toggle">ընդլայնել</a>
</p>
<p class="spoiler">
  թաքնված սպոյլեր
</p>
<p>
  տեքստով պարագրաֆ
</p>

Տեքստում, իհարկե, կարող են լինել բազմաթիվ սպոյլեր և յուրաքանչյուրի համար պետք է լինի իր հղումը։

html<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 կոդը։

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