<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 అకార్డియన్లు, "మరిన్ని చూపించు" విభాగాలు, కూలిక్కుండే సైడ్బార్లు, స్పాయిలర్ టెక్స్ట్, విస్తరించదగిన టేబల్ అడ్డు వరుసలు. గతంలో, ప్రతి అకార్డియన్కు యాక్సెసిబిలిటీ కోసం JavaScript మరియు ARIA వైరింగ్ అవసరమయ్యేది — ఇప్పుడు ఇది రెండు సెమాంటిక్ ట్యాగ్లు మాత్రమే.
<details>/<summary> మీకు యాక్సెసిబుల్, కీబోర్డ్-సవరణీయ కూలిక్కుండే కంటెంట్ JS లేకుండా మరియు మానవీయ ARIA లేకుండా ఇస్తాయి — ప్ల్యాట్ఫారమ్ను ఉపయోగించే సరిగ్గా ఉదాహరణ.
కస్టమ్ అకార్డియన్ను నిర్మించే ముందు FAQ మరియు "మరిన్ని చూపించు" నమూనాల కోసం దానిని ఎంచుకోండి.