HTML DOM Details open প্রপার্টি

HTML DOM Details open প্রপার্টি HTML <details> এলিমেন্টের open প্রপার্টির সাথে সম্পর্কিত। এটি একটি বুলিয়ান অ্যাট্রিবিউট এবং ব্যবহৃত হয়-details দৃশ্যমান হবে কিনা তা নির্দিষ্ট করতে। 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" বাটনে ক্লিক করলে:

উপরের উদাহরণে:

আমরা "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; 
}