JavaScript වල ස්පොයිලරය

දැන් අපි ස්පොයිලර් සාදන ආකාරය ඉගෙන ගනිමු. ස්පොයිලර් වශයෙන්, විශේෂ සබැඳියක් භාවිතයෙන් විවෘත කිරීමට හෝ වසා දැමීමට හැකි බ්ලොක් මම අදහස් කරමි.

පහත උදාහරණ කේතයේ, පන්තිය spoiler සහිත ඡේදය ස්පොයිලරයක් වන අතර, පන්තිය toggle සහිත සබැඳිය ක්ලික් කිරීමෙන් මෙම ස්පොයිලරය පෙන්විය යුතුය හෝ සඟවා ගත යුතුය:

<p>
	පෙළ සහිත ඡේදය
	<a href="" class="toggle">විවෘත කරන්න</a>
</p>
<p class="spoiler">
	සැඟවුණු ස්පොයිලරය
</p>
<p>
	පෙළ සහිත ඡේදය
</p>

පෙළ තුළ, ඇත්ත වශයෙන්ම, බොහෝ ස්පොයිලර් තිබිය හැකිය සහ එක් එක්ට තමන්ගේම සබැඳියක් තිබිය යුතුය:

<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 කේතය ලියන්න:

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

ලබා දී ඇති HTML සහ CSS කේත ඔබ වෙත පිටපත් කර ගන්න. විස්තර කර ඇති ස්පොයිලර් ක්රියාකාරිත්වය ක්රියාත්මක කරන්න.