जावास्क्रिप्ट में अकॉर्डियन
आइए अब एक अकॉर्डियन लागू करते हैं। यह टैब की तरह ही है, लेकिन साइड में पलटा हुआ। साथ ही अकॉर्डियन में वर्तमान टैब को बंद किया जा सकता है, यदि सक्रिय लिंक पर क्लिक किया जाए।
यहाँ एक नमूना है:
उस वर्स्टअप को भी अध्ययन करें, जिस पर हम समस्या का समाधान करेंगे:
<div id="parent">
<div class="tab active">
<div class="link">
<a href="#" >टैब 1</a>
</div>
<div class="text">
टैब 1 का टेक्स्ट
</div>
</div>
<div class="tab">
<div class="link">
<a href="#" >टैब 2</a>
</div>
<div class="text">
टैब 2 का टेक्स्ट
</div>
</div>
<div class="tab">
<div class="link">
<a href="#" >टैब 3</a>
</div>
<div class="text">
टैब 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;
}
चर्चा
तकनीकी रूप से अकॉर्डियन का HTML कोड टैब के कोड
से अधिक सुविधाजनक है: इसमें लिंक सीधे उस स्पॉयलर के
ऊपर स्थित होते हैं, जिसे वे खोलते और बंद करते हैं।
इसके अलावा, हमारे वर्स्टअप में क्लास active
लिंक और स्पॉयलर के सामान्य पैरेंट को दी जाती है।
इसका मतलब है कि लिंक पर क्लिक करने पर बस
पुराने टैब को निष्क्रिय करना और नए टैब को
सक्रिय करना है। पुराने टैब को निष्क्रिय करने के लिए
क्लास active वाला टैब ढूंढना होगा
और उससे यह क्लास हटानी होगी।
नए टैब को सक्रिय करने के लिए
लिंक पर क्लिक करके इस लिंक के
पैरेंट टैब को ढूंढना होगा और उसे क्लास active देनी होगी। तकनीकी रूप से
ऐसी खोज इस प्रकार की जा सकती है: बस लिंक का
निकटतम पैरेंट ढूंढें, जिसमें क्लास
tab हो।
दिए गए HTML और CSS कोड की प्रतिलिपि बनाएँ। वर्णित एल्गोरिथ्म के अनुसार अकॉर्डियन लागू करें।
