Accordion kwa JavaScript

Sasa hebu tutekeleze accordion. Inafanana na tabo zilizopinduliwa kwa upande. Katika accordion, unaweza kufunga tabo iliyo wazi ukibonyeza kiungo kilicho active.

Hapa kuna mfano:

Pia chunguza markup ambayo tutatumia kutatua tatizo:

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

Majadiliano

Kitaalam, msimbo wa HTML wa accordion ni rahisi kuliko msimbo wa tabo: kiungo kiko moja kwa moja juu ya sehemu inayofunguka na kufungwa. Zaidi ya hayo, class active kwenye markup yetu hupewa kwa mzazi wa pamoja wa kiungo na sehemu inayofunguka.

Hii inamaanisha kuwa ukibonyeza kiungo, inabidi uzime tabo ya zamani na uwashe mpya. Ili kuzima tabo ya zamani unahitaji kupata tabo iliyo na class active na kuiondoa class hiyo.

Ili kuwasha tabo mpya unahitaji, kwa kubonyeza kiungo, kupata mzazi wa kiungo hicho na kuipa class active. Kitaalam utafutaji kama huo unaweza kufanywa hivi: tafuta mzazi wa karibu wa kiungo aliye na class tab.

Iakiri msimbo wa HTML na CSS uliopewa. Tekeleza accordion kulingana na algoriti iliyoelezewa.