HTML <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-এর ইভেন্ট অ্যাট্রিবিউট。

ডিফল্ট সিএসএস সেটিং

অধিকাংশ ব্রাউজার নিম্নলিখিত ডিফল্ট মান ব্যবহার করবে <details> উপাদান:

details {
  display: block;
}

ব্রাউজার সমর্থন

টেবিলের সংখ্যা প্রথম সম্পূর্ণভাবে এই ইলেকট্রনেটিকের সমর্থনকারী ব্রাউজার সংস্করণ

চ্রোম এজ ফায়ারফক্স স্যাফারি ওপেরা
চ্রোম এজ ফায়ারফক্স স্যাফারি ওপেরা
12.0 79.0 49.0 6.0 15.0
  • পূর্ববর্তী পৃষ্ঠা <del>
  • পরবর্তী পৃষ্ঠা <dfn>