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 კოდები. განახორციელეთ აღწერილი სპოილერების მუშაობა.