Akordeon na JavaScript

Zdaj pa implementirajmo akordeon. Podoben je na zavihke, obrnjene na stran. Poleg tega je v akordeonu mogoče zapreti trenutni zavihek, če kliknemo na aktivno povezavo.

Tu je vzorec:

Preučite tudi označevanje, na katerem bomo reševali nalogo:

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

Razprava

Tehnično je HTML koda akordeona bolj priročna kot koda zavihkov: v njej so povezave nameščene neposredno nad vsebino, ki jo odpirajo in zapirajo. Poleg tega se v našem označevanju class active daje skupnemu staršu povezave in vsebine.

To pomeni, da ob kliku na povezavo moramo samo deaktivirati stari zavihek in aktivirati nov. Za deaktivacijo starega zavihka je treba najti zavihek s class active in iz njega odstraniti ta class.

Za aktivacijo novega zavihka je treba ob kliku na povezavo najti zavihek-starša te povezave in mu dati class active. Tehnično lahko takšno iskanje naredimo takole: preprosto najti najbližjega starša povezave, ki ima class tab.

Kopirajte si navedeni HTML in CSS kodi. Implementirajte akordeon v skladu z opisanim algoritmom.