Spoilër në JavaScript

Tani do të mësojmë si të bëjmë spoilera. Nën spoilera unë kuptoj blloqe që mund të hapën, ose mbyllen me ndihmën e një linku të veçantë.

Në shembullin e mëposhtëm të kodit, paragrafi me klasën spoiler është një spoilër, dhe linku me klasën toggle duhet të klikohet për të shfaqur ose fshehur këtë spoilër:

<p>
	paragraf me tekst
	<a href="" class="toggle">hap</a>
</p>
<p class="spoiler">
	spoilër i fshehur
</p>
<p>
	paragraf me tekst
</p>

Në tekst, sigurisht, mund të ketë shumë spoilera dhe secili duhet të ketë linkun e vet:

<p>
	paragraf me tekst
</p>
<p>
	paragraf me tekst
	<a href="" class="toggle">hap spoilër 1</a>
</p>
<p class="spoiler">
	spoilër i fshehur 1
</p>
<p>
	paragraf me tekst
</p>
<p>
	paragraf me tekst
	<a href="" class="toggle">hap spoilër 2</a>
</p>
<p class="spoiler">
	spoilër i fshehur 2
</p>
<p>
	paragraf me tekst
</p>

Është e qartë se linku për hapje dhe vetë spoilëri duhet të lidhen në një farë mënyre. Mund të imagjinohen opsione të ndryshme, por në këtë rast unë propozoj ta bëjmë sipas vendndodhjes: le të themi, se linku me klasën toggle hap ose mbyll elementin me klasën spoiler, i vendosur menjëherë nën prindin e këtij linku.

Le të jetë spoilëri i fshehur si parazgjedhje, dhe nëse duam ta shfaqim - do t'i japim atij klasën active. Le të shkruajmë kodin përkatës CSS:

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

Kopjoni kodet e dhëna HTML dhe CSS. Implementoni funksionimin e përshkruar të spoilerve.