<details> এবং <summary> একটি নেটিভ ডিসক্লোজার উইজেট তৈরি করে — একটি সম্প্রসারণযোগ্য/সংকোচনযোগ্য বিভাগ — কোনো JavaScript ছাড়াই। ব্রাউজার টগল, কীবোর্ড সাপোর্ট এবং অ্যাক্সেসিবিলিটি আপনার জন্য পরিচালনা করে।
Click to expand
This content is hidden until the user opens it.
<summary> ক্লিকযোগ্য লেবেল (প্রথম চাইল্ড)।<details open> <!-- starts expanded -->
<summary>FAQ item</summary>
<p>Answer...</p>
</details>
const d = document.querySelector("details");
d.open; // boolean: is it open?
d.addEventListener("toggle", () => console.log(d.open)); // fires on open/close
summary { cursor: pointer; }
summary::marker { color: blue; } /* the triangle/arrow */
details[open] summary { font-weight: bold; } /* style when open */
FAQ accordions, "আরও দেখান" বিভাগ, সংকোচনযোগ্য সাইডবার, স্পয়লার টেক্সট, সম্প্রসারণযোগ্য টেবিল সারি। এই উপাদানের আগে, প্রতিটি accordion এর অ্যাক্সেসিবিলিটির জন্য JavaScript প্লাস ARIA ওয়্যারিং প্রয়োজন ছিল — এখন এটি দুটি সিমান্টিক ট্যাগ।
<details>/<summary> আপনাকে অ্যাক্সেসযোগ্য, কীবোর্ড-বান্ধব সংকোচনযোগ্য সামগ্রী দেয় কোনো JS এবং কোনো ম্যানুয়াল ARIA ছাড়াই — প্ল্যাটফর্ম ব্যবহারের একটি নিখুঁত উদাহরণ।
কাস্টম accordion তৈরি করার আগে FAQs এবং "আরও দেখান" প্যাটার্নের জন্য এটি খুঁজুন।