`
` અને `
` એલિમેન્ટ્સ શું પ્રદાન કરે છે?

Question

`

` અને `

` એલિમેન્ટ્સ શું પ્રદાન કરે છે?

Accepted Answer

`

` અને `

` એક **નેટિવ ડિસ્ક્લોજર વિજેટ** બનાવે છે — એક વિસ્તૃત/સંકુચિત કરી શકાય તેવો વિભાગ — **શૂન્ય JavaScript** સાથે. બ્રાઉઝર ટોગલ, કીબોર્ડ સપોર્ટ અને એક્સેસિબિલિટી તમારા માટે સંભાળે છે. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** ક્લિક કરી શકાય તેવો લેબલ છે (પ્રથમ બાળક). - તેના પછી સૌ કંઈ સંકુચિત કરી શકાય તેવો કન્ટેન્ટ છે. - સમરી પર ક્લિક કરવાથી ખોલવું/બંધ કરવું ટોગલ થાય છે — મૂળ રીતે કીબોર્ડ-ઍક્સેસિબલ (Enter/Space) અને સ્ક્રીન રીડર્સ દ્વારા સાચીરીતે જાહેર કરવામાં આવે છે. ## ડિફોલ્ટ રીતે ખોલવું અને સ્થિતિ શોધવી ```html

FAQ item

Answer...

``` ```js const d = document.querySelector("details"); d.open; // boolean: is it open? d.addEventListener("toggle", () => console.log(d.open)); // fires on open/close ``` ## માર્કર સ્ટાઇલ કરવું ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## વાસ્તવિક ઉપયોગ કેસ્સ FAQ અકોર્ડિયન્સ, "વધુ બતાવો" વિભાગો, સંકુચિત સાઇડબાર્સ, સ્પોઇલર ટેક્સ્ટ, વિસ્તૃત કરી શકાય તેવી ટેબલ પંક્તિઓ. આ એલિમેન્ટ પહેલાં, દરેક અકોર્ડિયનને JavaScript અને એક્સેસિબિલિટી માટે ARIA વાયરિંગ જરૂર પડતું હતું — હવે તે બે સિમેન્ટિક ટેગ છે. ## શા માટે તે મહત્વનું છે `

`/`

` તમને બિનાJavaScript અને મેન્યુયુઅલ ARIA સાથે ઍક્સેસિબલ, કીબોર્ડ-મૈત્રી સંકુચિત કરી શકાય તેવો કન્ટેન્ટ આપે છે — પ્લેટફોર્મનો ઉપયોગ કરવાનું એક પરફેક્ટ ઉદાહરણ. કસ્ટમ અકોર્ડિયન બનાવતા પહેલાં FAQs અને "વધુ બતાવો" પેટર્નમાં તેનો ઉપયોગ કરો.