Аккордеон дар JavaScript

Биёд ҳоло аккордеонро татбиқ кунем. Он монанд ба варақаҳо мебошад, ки бар ҷониб гардонида шудаанд. Дар ин ҳолат дар аккордеон метавон варақаи фаъоли ҳозираро пӯшид, агар ба пайванди фаъол зер кунед.

Ин намуна аст:

Таҳияи HTML-ро низ омӯзед, ки дар он мо масъаларо ҳал мекунем:

<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-и додашударо ба худ нусхабардорӣ кунед. Аккордеонро мувофиқи алгоритми тавсифшуда татбиқ кунед.