पाठ 27 / 30

Interactive Elements: details और dialog

details व summary से accordions और dialog element से modals जोड़ें, किसी JavaScript framework के बिना।

details और summary

<details> built-in expandable section बनाता है और <summary> उसका clickable heading है।

<details>
  <summary>What is HTML?</summary>
  <p>HTML structures web pages.</p>
</details>

dialog element

showModal() के साथ <dialog> focus handling और बंद करने के लिए Esc key वाला accessible modal देता है।

<dialog id="dlg">
  <p>Delete this item?</p>
  <form method="dialog"><button>Cancel</button><button value="ok">Delete</button></form>
</dialog>
<button onclick="dlg.showModal()">Open</button>

Custom div-आधारित widgets की जगह इन built-in elements को चुनें: इनमें keyboard और screen reader support मुफ्त मिलता है।