Ակորդեոն 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 կոդերը։ Իրականացրեք ակորդեոնը համաձայն նկարագրված ալգորիթմի։