Akordeon na JavaScriptu
Hajde sada da implementiramo akordeon. On je sličan tabovima, ali okrenutim na stranu. Pritom u akordeonu možete zatvoriti trenutni tab ako kliknete na aktivni link.
Evo primera:
Proučite i HTML strukturu na kojoj ćemo rešavati zadatak:
<div id="parent">
<div class="tab active">
<div class="link">
<a href="#" >tab 1</a>
</div>
<div class="text">
tekst taba 1
</div>
</div>
<div class="tab">
<div class="link">
<a href="#" >tab 2</a>
</div>
<div class="text">
tekst taba 2
</div>
</div>
<div class="tab">
<div class="link">
<a href="#" >tab 3</a>
</div>
<div class="text">
tekst taba 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;
}
Diskusija
Tehnički, HTML kod akordeona je praktičniji od
koda za tabove: u njemu su linkovi direktno locirani
iznad spoajlera (sadržaja) koji otvaraju i zatvaraju.
Pored toga, klasa active u našoj strukturi
se daje zajedničkom roditelju linka i spoajlera.
To znači da prilikom klika na link treba
jednostavno deaktivirati stari tab i aktivirati
novi. Da biste deaktivirali stari tab
potrebno je pronaći tab sa klasom active
i ukloniti mu tu klasu.
Da biste aktivirali novi tab, potrebno je
na klik na link pronaći tab-roditelja tog
linka i dodeliti mu klasu active. Tehnički,
takvu pretragu možete izvesti ovako: jednostavno pronađite
najbližeg roditelja linka koji ima klasu
tab.
Kopirajte sebi date HTML i CSS kodove. Implementirajte akordeon prema opisanom algoritmu.