कैसे बनाएं: फ़ोल्ड इफ़ेक्ट

सीखें कैसे फ़ोल्डेबल पार्ट बनाएं।

सममिश्रित भाग प्रभाव बनाएं

पहला पदक्षेप - HTML जोड़ें:

<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>

दूसरा पदक्षेप - CSS जोड़ें:

हाथवादक शैली सेट करें:

/* खोलने और बंद करने के लिए योजना को खोलने और बंद करने के लिए बटन के शैली को सेट करें */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
/* जब बटन पर क्लिक किया जाता है और जब आप माउस को बटन पर ले जाते हैं (हॉवर) तो बटन को पृष्ठभूमि रंग जोड़ें (JS के द्वारा .active क्लास जोड़ें) */
.active, .collapsible:hover {
  background-color: #ccc;
}
/* सममिश्रित सामग्री के शैली को सेट करें। ध्यान दें: डिफ़ॉल्ट छुपा हुआ है */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

तीसरा पदक्षेप - JavaScript जोड़ें:

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";
    } अन्यथा {
      content.style.display = "none";
    }
  });
}

स्वयं आयात करें

content.style.display = "block";

एनिमेटेड फोल्डर (नीचे स्क्रॉल) एक एनिमेटेड फोल्डर (नीचे स्क्रॉल) बनाने के लिए,max-height: 0、 overflow: hide max-height और

तब, JavaScript के माध्यम से पैनल को जोड़ने के लिए विशेषता के रूप में गणना करे और पासे को जोड़ें 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;
    यदि (content.style.maxHeight){
      content.style.maxHeight = null;
    } अन्यथा {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}
</script>

स्वयं आयात करें

चिह्न जोड़ें

प्रत्येक बटन के लिए एक संकेत जोड़ें ताकि लुकटा सामग्री खुला है या बंद है के लिए संकेत दिखाया जा सके:

उदाहरण

.collapsible:after {
  content: '\02795'; /* 表示“加号”（+）的 Unicode 字符 */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* 表示“减号”（-）的 Unicode 字符 */
}

स्वयं आयात करें