HTML DOM Details open प्रॉपर्टी HTML <details> open प्रॉपर्टी से जुड़ी हुई है। यह एक बूलियन एट्रिब्यूट है और इसका उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि विवरण उपयोगकर्ता को दिखाई देने चाहिए या नहीं। जब true पर सेट किया जाता है तो विवरण उपयोगकर्ता को दिखाई देते हैं। हालांकि, इसे false पर सेट करने का अर्थ है उपयोगकर्ता से विवरण छुपाना।
सिंटैक्स
details open प्रॉपर्टी सेट करने के लिए सिंटैक्स निम्नलिखित है:
detailsObject.open = true|false
यहां, true=विवरण दिखाए जाएंगे और false=विवरण छुपाए जाएंगे। विवरण डिफ़ॉल्ट रूप से छुपे होते हैं।
उदाहरण
Details open प्रॉपर्टी का एक उदाहरण देखते हैं:
<!DOCTYPE html> <html> <body> <h2>Details open() property</h2> <details id="Details1"> <summary>Eiffel Tower</summary> <p style="color:blue">The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower. </p> </details> <p>Click the below button to set the details to be visible to the user</p> <button onclick="setDetail()">Visible</button> <script> function setDetail() { document.getElementById("Details1").open = true; } </script> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा:
"Visible" बटन पर क्लिक करने पर:
उपरोक्त उदाहरण में:
हमने id "Details1" के साथ एक <details> तत्व बनाया है और इसके अंदर <summary> और कुछ टेक्स्ट वाला <p> तत्व है:
<details id="Details1"> <summary>Eiffel Tower</summary> <p style="color:blue">The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower. </p> </details>
हमने फिर "Visible" बटन बनाया जो उपयोगकर्ता द्वारा क्लिक किए जाने पर setDetail() फ़ंक्शन को निष्पादित करेगा:
<button onclick="setDetail()">Visible</button>
setDetail() फ़ंक्शन getElementById() का उपयोग करके <details> तत्व प्राप्त करता है और इसके open एट्रिब्यूट मान को true पर सेट करता है। यह <details> के अंदर की जानकारी को उपयोगकर्ता को प्रदर्शित करता है:
function setDetail() { document.getElementById("Details1").open = true; }
