Akkordeon op JavaScript

Laat ons nou 'n akkordeon implementeer. Dit lyk soos oortjies wat op hul sy gedraai is. Terselfdertyd kan jy die huidige oortjie in 'n akkordeon toemaak as jy op die aktiewe skakel druk.

Hier is 'n voorbeeld:

Bestudeer ook die opmaak waarop ons die probleem sal oplos:

<div id="parent">
	<div class="tab active">
		<div class="link">
			<a href="#" >Oortjie 1</a>
		</div>
		<div class="text">
			teks van oortjie 1
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >Oortjie 2</a>
		</div>
		<div class="text">
			teks van oortjie 2
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >Oortjie 3</a>
		</div>
		<div class="text">
			teks van oortjie 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;
}

Bespreking

Tegnies gesproke is die HTML-kode van 'n akkordeon geriefliker as die kode van oortjies: daarin is die skakels direk bo die spoiler wat hulle oop- en toemaak. Daarbenewens word die klas active in ons opmaak aan die gemeenskaplike ouer van die skakel en die spoiler gegee.

Dit beteken dat wanneer daar op 'n skakel gedruk word, jy net die ou oortjie moet deaktiveer en die nuwe een moet aktiveer. Om die ou oortjie te deaktiveer moet jy die oortjie met die klas active vind en hierdie klas daaruit verwyder.

Om die nuwe oortjie te aktiveer, moet jy volgens die klik op die skakel die ouer-oortjie van hierdie skakel vind en dit die klas active gee. Tegnies kan so 'n soektog so gedoen word: vind eenvoudig die naaste ouer van die skakel wat die klas tab het.

Kopieer die gegewe HTML- en CSS-kodes vir jouself. Implementeer die akkordeon volgens die beskryfde algoritme.