details மற்றும் summary உறுப்புகள் என்ன வழங்குகின்றன?

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 அக்கரடியன்கள், "மேலும் காட்டு" பிரிவுகள், சரிந்த பக்கப்பட்டிகள், spoiler உரை, விரிவாக்கக்கூடிய அட்டவணை வரிசைகள். முன்பு, ஒவ்வொரு அக்கரடியனும் அணுகல்தன்மைக்கான JavaScript மற்றும் ARIA வயரிங் தேவைப்பட்டது — இப்போது இது இரண்டு சொற்பொருள் குறிச்சொற்கள் மাত்র. ## ஏன் முக்கியமாக இருக்கிறது `

`/`

` உங்களுக்கு அணுகலக்கூடிய, விசைப்டடி-நட்பு சரிந்த உள்ளடக்கம் JS இல்லாமல் மற்றும் கையேட்டு ARIA இல்லாமல் — தளத்தை பயன்படுத்துவதற்கான சரியான எடுத்துக்காட்டு. FAQ மற்றும் "மேலும் காட்டு" வடிவங்களுக்குக் கொடுங்கள் மூல அக்கரடியன் கட்டுமానத்திற்கு முன்பு.