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 синфи бор ички саҳифани топиш ва ундан бу синфни ўчириш керак.

Янги ички саҳифани активлаштириш учун ҳаволага босилганда шу ҳаволанинг tab синфли энг якин ота-онасини топиш ва унга active синфини бериш керак. Техник жиҳатдан бундай излаш шундай амалга оширилиши мумкин: tab синфига эга бўлган ҳаволанинг энг якин ота-онасини топиш.

Келтирилган HTML ва CSS кодларни нусхалаб олинг. Тавсифланган алгоритм асосида аккордеонни амалга оширинг.