JS या CSS के बिना सामग्री को छिपाने और प्रकट करने के लिए एक HTML-only Accordion बनाएं

in संसाधन और उपकरण

क्या आप जानते हैं कि सामग्री को छिपाने और प्रकट करने के लिए बहुत आसानी से एक अकॉर्डियन रीड मोर/लेस बटन बनाने के लिए एक मूल HTML5 समाधान है कोई जावास्क्रिप्ट या सीएसएस नहीं. कैसे, पता करने के लिए पढ़ें।

html5 अकॉर्डियन

RSI और HTML5 टैग आधिकारिक तौर पर एक हैं प्रकटीकरण विजेट तत्व, लेकिन के साथ रखा HTML5 टैग आपको एक शुद्ध HTML-केवल अकॉर्डियन.

अर्थ कोई जेएस या सीएसएस नहीं ज़रूरी है। वह कितना शांत है!

यहां एक उदाहरण दिया गया है जो एक साधारण तत्व दिखा रहा है a और .

यहाँ कोड है:

<details>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>

और यहाँ यह कैसा दिखेगा:

विस्तार में पढ़ें

यह सामग्री को छिपाने और प्रकट करने के लिए एक मूल HTML5 अकॉर्डियन है। बहुत बढ़िया, है ना?

यह कैसे काम करता है? RSI  टैग किसी तत्व के लिए एक आवरण के रूप में कार्य करता है जिसे खोला या बंद किया जा सकता है। उपयोगकर्ता को उस लेबल पर क्लिक करना होगा जो कि है तत्व को खोलने या बंद करने के लिए टैग।

स्टाइल और व्यवहार के बारे में क्या?

शैलियाँ

आप प्रकट टेक्स्ट बॉक्स की उपस्थिति को अनुकूलित करने के लिए सीएसएस स्टाइल लागू कर सकते हैं। नीचे एक टैब्ड इंटरफ़ेस शैली दी गई है:

details {
  font: 16px "Open Sans", Calibri, sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

details[open] > summary {
  background-color: #ccf;
}

डिफ़ॉल्ट रूप से, कर्सर एक तीर की तरह दिखाई देता है, लेकिन यदि आप चाहते हैं कि यह a . हो हाथ की ओर इशारा करते हुए इसके बजाय इसका उपयोग करें:

details {
cursor: pointer;
}

व्यवहार

व्यवहार सेट करना बहुत सीमित है, वास्तव में केवल एक ही चीज है जो आप कर सकते हैं और वह है प्रकट पाठ बनाना डिफ़ॉल्ट रूप से खोलें.

अकॉर्डियन को उसकी खुली अवस्था में शुरू करने के लिए, बूलियन जोड़ें खुला को विशेषता टैग:

<details open>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>
विस्तार में पढ़ें

यह सामग्री को छिपाने और प्रकट करने के लिए एक मूल HTML5 अकॉर्डियन है। बहुत बढ़िया, है ना?

मैं किन विशेषताओं का उपयोग कर सकता हूं?

नीचे दी गई विशेषताओं का उपयोग के लिए किया जा सकता है टैग:

विशेषतावैल्यू सारांश
खुलाखुलाडिफ़ॉल्ट है खुला नहीं.
id  मूल्यएक विशिष्ट पहचानकर्ता प्रदान करता है।
कक्षा  वर्ग के नामतत्व को वर्ग नाम निर्दिष्ट करता है।
अंदाज  सीएसएस-मानतत्व को CSS स्टाइल असाइन करता है।

तो सीमाएं क्या हैं? हमेशा एक पकड़ होती है, है ना?

इंटरनेट एक्सप्लोरर के लिए कोई समर्थन नहीं

यह केवल HTML5 अकॉर्डियन Internet Explorer के किसी भी संस्करण में काम नहीं करेगा। यदि आपको इसे IE11 का समर्थन करना है, तो आपको JQuery का उपयोग करके एक अलग फ़ॉलबैक समाधान का उपयोग करना होगा। अन्य सभी ब्राउज़र समर्थन करते हैं और .

कोई अनुकूलित एनिमेशन या संक्रमण नहीं

जबकि आप उपस्थिति को संशोधित और शैलीबद्ध कर सकते हैं (जैसा कि ऊपर दिखाया गया है), आप कोई भी टेक्स्ट प्रकट करने वाले एनिमेशन या संक्रमण नहीं कर पाएंगे। यदि आप ऐसा करना चाहते हैं तो आपको एक और CSS/JSS अकॉर्डियन समाधान की आवश्यकता होगी।

स्क्रीन रीडर और एक्सेसिबिलिटी

यह देशी है HTML5 और यह *सुलभ* होना चाहिए लेकिन यह पाया गया है कि वास्तविक प्रकट पाठ हमेशा एक स्क्रीन रीडर द्वारा सही ढंग से घोषित नहीं किया जाता है।

सन्दर्भ:

लेखक के बारे में

मैट अहलग्रेन

माथियास अहलग्रेन के सीईओ और संस्थापक हैं Website Rating, संपादकों और लेखकों की एक वैश्विक टीम का संचालन करना। उनके पास सूचना विज्ञान और प्रबंधन में मास्टर डिग्री है। विश्वविद्यालय के दौरान शुरुआती वेब विकास अनुभवों के बाद उनका करियर एसईओ की ओर मुड़ गया। एसईओ, डिजिटल मार्केटिंग और वेब डेवलपमेंट में 15 वर्षों से अधिक अनुभव के साथ। उनके फोकस में वेबसाइट सुरक्षा भी शामिल है, जिसका सबूत साइबर सुरक्षा में एक प्रमाणपत्र है। यह विविध विशेषज्ञता उनके नेतृत्व को रेखांकित करती है Website Rating.

सूचित रहें! हमारे समाचार पत्र शामिल हों
अभी सदस्यता लें और केवल-ग्राहकों के लिए गाइड, टूल और संसाधनों तक निःशुल्क पहुंच प्राप्त करें।
आप किसी भी समय सदस्यता समाप्त कर सकते हैं। आपका डेटा सुरक्षित है.
सूचित रहें! हमारे समाचार पत्र शामिल हों
अभी सदस्यता लें और केवल-ग्राहकों के लिए गाइड, टूल और संसाधनों तक निःशुल्क पहुंच प्राप्त करें।
आप किसी भी समय सदस्यता समाप्त कर सकते हैं। आपका डेटा सुरक्षित है.
साझा...