कैसे बनाएं: फ़ोल्डबैक सामग्री/हाथफूली

हाथी को कैसे बनाया जाता है (सरल सामग्री) सीखें।

हाथी का निर्माण करें

पहला कदम - एचटीएमएल जोड़ें:

<button class="accordion">सेक्शन 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">सेक्शन 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">सेक्शन 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

दूसरा कदम - सीएसएस जोड़ें:

हाथी के स्टाइल को निर्धारित करें

/* खोलने और बंद करने के लिए बटन के लिए हाथी के पैनल को स्टाइल निर्धारित करें */
.accordion {
  बैकग्राउंड-कलर: #eee;
  कलर: #444;
  कर्सर: पॉइंटर;
  पैडिंग: 18पाइक्स;
  विधुर: 100%;
  लेबल-आलाइन: लेफ्ट;
  बॉर्डर: नॉन;
  आउटलाइन: नॉन;
  ट्रांजिशन: 0.4s;
}
/* यदि बटन को क्लिक किया गया (JS द्वारा .active क्लास जोड़ी गई), तो उसको बैकग्राउंड-कलर और माउस के उपर ले जाने पर (होवर) जोड़ें */
.active, .accordion:hover {
  बैकग्राउंड-कलर: #ccc;
}
/* हाथी के पैनल को स्टाइल जोड़ें. ध्यान दें: डिफ़ॉल्ट में यह छुपा है */
.panel {
  padding: 0 18px;
  background-color: white;
  डिस्प्ले: नॉन;
  overflow: hidden;
}

तीसरा कदम - जेसक्रिप्ट जोड़ें:

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* "active" क्लास जोड़ने और हटाने को टूथरेन्स, ताकि नियंत्रण पैनल के बटन को उभारा जा सके */
    this.classList.toggle("active");
    /* छुपा और दिखाने वाला एक्टिव पैनल टूथरेन्स */
    var panel = this.nextElementSibling;
    यदि (panel.style.display === "block") {}}
      panel.style.display = "none";
    } अन्यथा {
      panel.style.display = "block";
    }
  });
}

अपने आप प्रयास करें

एनिमेशन शाफ्ट (नीचे उतारना)

एक एनिमेशन शाफ्ट की तरह का एनिमेशन करने के लिए, पैनल को एक क्लास जोड़ें max-height: 0、overflow: hidden और max-height प्रवाह की प्रभावकारी तरंग की गणना करें।

तब, JavaScript का उपयोग करके अलग-अलग स्क्रीन आकार के आधार पर पैनल की ऊंचाई की गणना करें और सेट करें max-heightसामग्री को नीचे उतारने के लिए इस्तेमाल करें:

<style>
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    यदि (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } अन्यथा {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}
</script>

अपने आप प्रयास करें

प्रतीक जोड़ें

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

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

अपने आप प्रयास करें