हेल्लो दोस्तों, आज हम HTML, CSS एवं Java code के माध्यम से collapse panel को बनाने वाले है इसको बनाने के लिए हमने HTML, CSS एवं Java code का प्रयोग किया है इसको बनाना बहुत ही असान है यदि आप भी collapse panel बनाना सीखना चाहते है तो आप हमारे इस पोस्ट को आखिरी तक पढ़े आपको इसी पोस्ट में नीचे इसका कोड भी दिया गया है आप चाहे तो कॉपी बटन कर क्लिक करके कोड को कॉपी कर सकते है
Collapse Panel क्या है?
जब हम किसी पैराग्राफ को किसी पैनल के माध्यम से हाईड करते है और हम यह चाहते है की जब कोई उस पैनल पर क्लिक करे तब वह पैराग्राफ दिखाई दे तो उसे हम collapse panel कहते है इसके माध्यम से हम कई पैनल बना कर उसमे लिखे गए पैराग्राफ को हाईड कर सकते है
Collapse Panel Demo
ऊपर दिखाए Demo Collapse Panel का अब हम style Create करेंगे
.collapse {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .collapse:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
ऊपर दर्शाए गए CSS कोड में हमने Collapse Panel के Button,Background, Hover, Padding,Font Size एवं width को style दिए है जिनका उपयोग Collapse Panel को खोलने एवं बंद करने के लिए किया जाता है
अब हम HTML कोड का Use करके Collapse Panel में पैराग्राफ को लिखेंगे एवं Collapse Panel में एक छोटी सी हैडिंग को Add करेंगे जिसके लिए हमने Collapse Panel में जो पैराग्राफ है उसके बारे में पता चलेगा
<button class="collapse">Section 1</button>
<div class="panel">
<p>पैराग्राफ 1 </p>
</div>
<button class="collapse">Section 2</button>
<div class="panel">
<p>पैराग्राफ 2 </p>
</div>
<button class="collapse">Section 3</button>
<div class="panel">
<p>पैराग्राफ 3</p>
</div>
उपरोक्त दिए गए HTML Code में Section 1, Section 2, एवं Section 3 को बदल कर आप अपने अनुसार कोई हैडिंग दे सकते तथा पैराग्राफ 1,पैराग्राफ 2 एवं पैराग्राफ 3 को Change करके अपना पैराग्राफ लिखें
यदि आप और भी Collapse Panel को Add करना चाहते है तो आप नीचे दिए गए Code को Last वाले </div> के नीचे Paste कर दे
<button class="collapse">Section 3</button>
<div class="panel">
<p>पैराग्राफ 4</p>
</div>
अब हम Java Code को Create करेंगे ऊपर दिए गए कोड के नीचे आपको इस कोड Paste करना है
var acc = document.getElementsByClassName("collapse");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
अब इस तरह से हमारा Collapse Panel बनकर तैयार हो चूका है आप चाहे तो दिए गए कोड में अपने अनुसार कोई भी परिवर्तन कर सकते है
Collapse Panel का पूरा कोड कॉपी करने के लिए दिए गए नीचे कॉपी बटन पर क्लिक करके कोड को कॉपी कर सकते है