აკორდეონი JavaScript-ში

ახლა კი განვახორციელოთ აკორდეონი. იგი მოგვაგონებს ჩანართებს, რომლებიც გვერდზე არის გადაბრუნებული. ამ შემთხვევაში აკორდეონში შესაძლებელია მიმდინარე ჩანართის დახურვა, თუ აქტიურ ბმულზე დააჭერთ.

აი ნიმუში:

გაეცანით ასევე ვერსტკას, რომლის საფუძველზეც ამოცანას გავაკეთებთ:

<div id="parent">
	<div class="tab active">
		<div class="link">
			<a href="#" >ჩანართი 1</a>
		</div>
		<div class="text">
			ჩანართი 1-ის ტექსტი
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >ჩანართი 2</a>
		</div>
		<div class="text">
			ჩანართი 2-ის ტექსტი
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >ჩანართი 3</a>
		</div>
		<div class="text">
			ჩანართი 3-ის ტექსტი
		</div>
	</div>
</div>

#parent {
	margin: 0 auto;
	width: 400px;
}
.tab {
	margin-bottom: 10px;
}

.tab .link a {
	display: block;
	padding: 10px;
	color: black;
	text-decoration: none;
	text-align: center;
	background: #f8f8f8;
	border: 1px solid gray;
}
.tab .link:hover a {
	background: #f2f2f2;
}

.tab:not(.active) .text {
	display: none;
}
.tab .text {
	border: 1px dashed gray;
	border-top: none;
	
	padding: 10px;
	height: 300px;
}

განხილვა

ტექნიკურად აკორდეონის HTML კოდი უფრო მოსახერხებელია, ვიდრე ჩანართების კოდი: მასში ბმულები განლაგებულია უშუალოდ იმ სპოილერის ზემოთ, რომელსაც ისინი ხსნიან და ხურავენ. გარდა ამისა, კლასი active ჩვენს ვერსტკაში იკისრება ბმულისა და სპოილერის საერთო მშობელს.

ეს ნიშნავს, რომ ბმულზე დაჭერისას საჭიროა უბრალოდ ძველი ჩანართის დეაქტივაცია და ახლის აქტივაცია. ძველი ჩანართის დეაქტივაციისთვის საჭიროა მოიძებნოს active კლასის მქონე ჩანართი და ამოიშალოს მისგან ეს კლასი.

ახალი ჩანართის ასაქტიურებლად საჭიროა ბმულზე დაჭერისას მოიძებნოს ამ ბმულის მშობელი ჩანართი და მივანიჭოთ მას კლასი active. ტექნიკურად ასეთი ძიების განხორციელება შესაძლებელია ასე: უბრალოდ მოიძებნოს ბმულის უახლოესი მშობელი, რომელსაც აქვს კლასი tab.

თქვენთვის მოცემული HTML და CSS კოდები დააკოპირეთ. განახორციელეთ აკორდეონი აღწერილი ალგორითმის მიხედვით.