कैसे करें - संक्षिप्त करें
छोटा करने योग्य अनुभाग बनाने का तरीका जानें.
खुलने और बंधनेवाला
बंधी हुई सामग्री को दिखाने और छिपाने के बीच टॉगल करने के लिए बटन पर क्लिक करें।
कुछ बंधनेवाला सामग्री। बंधी हुई सामग्री को दिखाने और छिपाने के बीच टॉगल करने के लिए बटन पर क्लिक करें। दर्द अपने आप में महत्वपूर्ण है, लेकिन वजन बढ़ने की प्रक्रिया से दर्द बढ़ जाता है, लेकिन मैं इसे काटने का समय देता हूं ताकि मैं कुछ महान काम और दर्द कर सकूं। ताकि अधिकांश भाग के लिए, हम में से कोई भी इससे उद्देश्यों का लाभ उठाने के अलावा किसी भी प्रकार के रोजगार के अभ्यास में आ जाएगा।
एक बंधनेवाला बनाएँ
चरण 1) HTML जोड़ें:
उदाहरण
<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
<p>Lorem ipsum...</p>
</div>
चरण 2) सीएसएस जोड़ें:
अकॉर्डियन को स्टाइल करें:
उदाहरण
/* Style the button that is used to open and close the
collapsible content */
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* Add a background color to the button if it is clicked on (add the
.active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: #ccc;
}
/* Style the
collapsible content. Note:
hidden by default */
.content {
padding: 0 18px;
display:
none;
overflow: hidden;
background-color: #f1f1f1;
}
चरण 3) जावास्क्रिप्ट जोड़ें:
उदाहरण
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click",
function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display
=== "block") {
content.style.display =
"none";
} else {
content.style.display = "block";
}
});
}
ऐनिमेटेड कोलैप्सेबल (नीचे की ओर स्लाइड करें)
एनिमेटेड कोलैप्सेबल बनाने के लिए, अधिकतम-ऊंचाई संपत्ति के लिए कक्षा में जोड़ें max-height: 0और a जोड़ें overflow: hidden।transitionpanel
max-heightफिर, विभिन्न स्क्रीन आकारों पर पैनल की ऊंचाई के आधार पर परिकलित सेट करके सामग्री को नीचे स्लाइड करने के लिए जावास्क्रिप्ट का उपयोग करें
:
उदाहरण
<style>
.content {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
<script>
var
coll =
document.getElementsByClassName("collapsible");
var i;
for (i = 0; i <
coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight =
content.scrollHeight + "px";
}
});
}
</script>
प्रतीक जोड़ें
यह इंगित करने के लिए कि बंधनेवाला सामग्री खुली है या बंद है, प्रत्येक बटन में एक प्रतीक जोड़ें:
उदाहरण
.collapsible:after {
content: '\02795'; /* Unicode
character for "plus" sign (+) */
font-size: 13px;
color: white;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796"; /*
Unicode character for "minus" sign (-) */
}