परिचय
HTML open एट्रिब्यूट यह निर्दिष्ट करता है कि <details> HTML एलिमेंट की सामग्री उपयोगकर्ता को दृश्यमान (खुली) होनी चाहिए। यह एक बूलियन एट्रिब्यूट है।
सिंटैक्स
<details open></details>
उदाहरण
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
font-family: Arial, sans-serif;
padding: 20px;
}
details {
max-width: 500px;
margin: 2rem auto;
text-align: left;
padding: 1rem;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
summary {
cursor: pointer;
font-weight: bold;
font-size: 1.2rem;
color: #db133a;
}
summary::-webkit-details-marker {
color: #db133a;
}
</style>
<body>
<h1>HTML open एट्रिब्यूट डेमो</h1>
<details open>
<summary>नमस्ते! मैं एक सारांश एलिमेंट हूँ</summary>
<p>नमस्ते! मैं कुछ डमी टेक्स्ट वाला एक पैराग्राफ एलिमेंट हूँ। यह सामग्री डिफ़ॉल्ट रूप से खुली हुई है क्योंकि details एलिमेंट पर open एट्रिब्यूट है।</p>
</details>
</body>
</html>
आउटपुट
<details> एलिमेंट डिफ़ॉल्ट रूप से खुला हुआ दिखाई देगा, इसकी सामग्री (सारांश और पैराग्राफ) दृश्यमान होगी। उपयोगकर्ता सारांश पर क्लिक करके इसे बंद/खोल सकता है।
महत्वपूर्ण बिंदु
- यह एक बूलियन एट्रिब्यूट है - केवल उपस्थिति ही इसे सक्रिय करती है
- केवल
<details>एलिमेंट पर लागू होता है - बिना
openके, सामग्री डिफ़ॉल्ट रूप से छिपी होती है - JavaScript से टॉगल:
details.open = true/false ontoggleइवेंट से खुलने/बंद होने का पता लगा सकते हैं
उपयोग के मामले
- FAQ सेक्शन जहां पहला उत्तर खुला हो
- महत्वपूर्ण जानकारी जिसे तुरंत दिखाना हो
- प्रगतिशील प्रकटीकरण (Progressive Disclosure) पैटर्न
ब्राउज़र समर्थन
HTML5.1 समर्थन वाले सभी आधुनिक ब्राउज़रों में कार्य करता है (IE/Edge Legacy में समर्थित नहीं)।
