Akordeons JavaScript

Tagad realizēsim akordeonu. Tas ir līdzīgs cilnēm, kas apgrieztas uz sāniem. Turklāt akordeonā var aizvērt pašreizējo cilni, ja noklikšķina uz aktīvās saites.

Šeit ir paraugs:

Izpētiet arī izkārtojumu, uz kura mēs risināsim uzdevumu:

<div id="parent">
	<div class="tab active">
		<div class="link">
			<a href="#" >cilne 1</a>
		</div>
		<div class="text">
			cilnes 1 teksts
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >cilne 2</a>
		</div>
		<div class="text">
			cilnes 2 teksts
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >cilne 3</a>
		</div>
		<div class="text">
			cilnes 3 teksts
		</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;
}

Diskusija

Tehniski HTML kods akordeonam ir ērtāks nekā cilņu kods: tajā saites atrodas tieši virs spoileru, ko tās atver un aizver. Turklāt klase active mūsu izkārtojumā tiek dota kopīgam saites un spoileru vecākam.

Tas nozīmē, ka, noklikšķinot uz saites, vienkārši jādeaktivizē vecā cilne un jāaktivizē jaunā. Lai deaktivizētu veco cilni, jāatrod cilne ar klasi active un jānoņem no tās šī klase.

Lai aktivizētu jaunu cilni, ir jāatrod šīs saites vecāka cilne un jāpiešķir tai klase active. Tehniski šādu meklēšanu var izdarīt šādi: vienkārši atrast tuvāko saites vecāku, kuram ir klase tab.

Kopējiet sev norādītos HTML un CSS kodus. Realizējiet akordeonu saskaņā ar aprakstīto algoritmu.