एचटीएमएल <details> टैग

  • पिछला पृष्ठ <del>
  • अगला पृष्ठ <dfn>

वर्णन और उपयोग

<details> टैग उपयोगकर्ता को आवश्यकता के अनुसार खोलने और बंद करने के लिए अन्य विवरण निर्धारित करता है。

<details> टैग अकसर उपयोगकर्ता को खोलने और बंद करने के लिए इंटरैक्टिव लघुविक्रम को बनाने के लिए उपयोग किया जाता है। डिफ़ॉल्ट में, विक्रम बंद होता है। जब वह खुला होता है तो वह विस्तारित होता है और उसमें निहित सामग्री दिखाया जाता है。

किसी भी तरह की सामग्री को रखा जा सकता है <details> टैग में。

सूचना:<summary> टैग और <details> संयोजित रूप से, विवरण के दृश्यमान शीर्षक को निर्धारित कर सकते हैं। उपयोगकर्ता जब शीर्षक पर क्लिक करता है तो वह दिखाया जाएगा <details> निर्धारित सामग्री。

और देखें:

HTML DOM संदर्भ पुस्तक:Details ऑब्जेक्ट

उदाहरण

उदाहरण 1

उपयोगकर्ता को आवश्यकता के अनुसार विवरण खोलने और बंद करने के लिए विवरण निर्धारित करें:

<details>
  <summary>भविष्य के केंद्र (Epcot Center)</summary>
  
Epcot 是华特迪士尼世界度假区的主题公园，拥有令人兴奋的景点、国际展馆、屡获殊荣的烟花和季节性活动。

<p>Epcot है हार्ट डिस्नी वर्ल्ड रिजर्वेशन के थीम पार्क, जिसमें रोमांचक आकर्षण, अंतर्राष्ट्रीय प्रदर्शन, पुरस्कार विजेता फायरवर्क और मौसमी गतिविधियां हैं。</p>

</html>

उदाहरण 2

CSS के द्वारा <details> और <summary> का शैली निर्धारित करें:

<html>
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}
details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
  <summary>भविष्य के केंद्र (Epcot Center)</summary>
  
Epcot 是华特迪士尼世界度假区的主题公园，拥有令人兴奋的景点、国际展馆、屡获殊荣的烟花和季节性活动。

<p>Epcot है हार्ट डिस्नी वर्ल्ड रिजर्वेशन के थीम पार्क, जिसमें रोमांचक आकर्षण, अंतर्राष्ट्रीय प्रदर्शन, पुरस्कार विजेता फायरवर्क और मौसमी गतिविधियां हैं。</p>
</details>
</body>

</html>

स्वयं प्रयोग की परीक्षा करें

स्वयं प्रयोग की परीक्षा करें विशेषता मूल्य
वर्णन वर्णन open

विवरणों को उपयोगकर्ता के लिए दिखाना निर्धारित करता है (खुला)।

<details> टैग इवेंट विशेषता का समर्थन करता है वैश्विक विशेषता।

HTML में वैश्विक विशेषता

<details> टैग इवेंट विशेषता का समर्थन करता है HTML में इवेंट विशेषता।

डिफॉल्ट CSS सेटिंग

अधिकांश ब्राउज़र निम्नलिखित डिफॉल्ट मूल्यों को प्रदर्शित करेंगे <details> एलीमेंट:

details {
  display: block;
}

ब्राउज़र समर्थन

तालिका में नम्बर इस तत्व को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण को निर्दिष्ट करते हैं。

च्रोम एज फायरफॉक्स सैफारी ऑपेरा
च्रोम एज फायरफॉक्स सैफारी ऑपेरा
12.0 79.0 49.0 6.0 15.0
  • पिछला पृष्ठ <del>
  • अगला पृष्ठ <dfn>