एचटीएमएल <विवरण> टैग
उदाहरण
विवरण निर्दिष्ट करें जिसे उपयोगकर्ता मांग पर खोल और बंद कर सकता है:
<details>
<summary>Epcot Center</summary>
<p>Epcot is a
theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</details>
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
<details>टैग अतिरिक्त विवरण निर्दिष्ट करता है जिसे उपयोगकर्ता मांग पर खोल और बंद कर सकता है ।
टैग का <details>उपयोग अक्सर एक इंटरैक्टिव विजेट बनाने के लिए किया जाता है जिसे उपयोगकर्ता खोल और बंद कर सकता है। डिफ़ॉल्ट रूप से, विजेट बंद है। खुला होने पर, यह फैलता है, और सामग्री को भीतर प्रदर्शित करता है।
<details>किसी भी प्रकार की सामग्री को टैग के अंदर रखा जा सकता है ।
युक्ति: विवरण के लिए एक दृश्य शीर्षक निर्दिष्ट करने के लिए <सारांश> टैग का उपयोग संयोजन में किया जाता है ।<details>
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से तत्व का समर्थन करता है।
| Element | |||||
|---|---|---|---|---|---|
| <details> | 12.0 | 79.0 | 49.0 | 6.0 | 15.0 |
गुण
| Attribute | Value | Description |
|---|---|---|
| open | open | Specifies that the details should be visible (open) to the user |
वैश्विक गुण
<details>टैग HTML में वैश्विक विशेषताओं का भी समर्थन करता है ।
घटना गुण
<details>टैग HTML में ईवेंट विशेषताओं का भी समर्थन करता है ।
और ज्यादा उदाहरण
उदाहरण
शैली <विवरण> और <सारांश> के लिए CSS का उपयोग करें:
<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>
<p>Epcot is a theme park at Walt Disney
World Resort featuring exciting attractions, international pavilions,
award-winning fireworks and seasonal special events.</p>
</details>
</body>
</html>
संबंधित पृष्ठ
एचटीएमएल डोम संदर्भ: विवरण वस्तु
डिफ़ॉल्ट सीएसएस सेटिंग्स
अधिकांश ब्राउज़र <details>निम्न डिफ़ॉल्ट मानों के साथ तत्व प्रदर्शित करेंगे:
details {
display: block;
}