`
` ਅਤੇ `
` ਐਲੀਮੈਂਟ ਕੀ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ?

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 accordions, "ਹੋਰ ਦਿਖਾਓ" ਭਾਗ, ਸੰਕੁਚਿਤ ਸਾਈਡਬਾਰ, ਸਪੋਇਲਰ ਟੈਕਸਟ, ਵਿਸਤ੍ਰਿਤ ਟੇਬਲ ਕਤਾਰਾਂ। ਇਸ ਐਲੀਮੈਂਟ ਤੋਂ ਪਹਿਲਾਂ, ਹਰ accordion ਨੂੰ ਪਹੁੰਚਯੋਗਤਾ ਲਈ JavaScript ਅਤੇ ARIA ਵਾਇਰਿੰਗ ਦੀ ਲੋੜ ਸੀ — ਹੁਣ ਇਹ ਦੋ ਅਰਥਪੂਰਣ ਟੈਗ ਹਨ। ## ਕਿਉਂ ਇਹ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ `

`/`

` ਤੁਹਾਨੂੰ ਕੋਈ JS ਅਤੇ ਕੋਈ ਵੀ ਹੱਥੀਂ ARIA ਤੋਂ ਬਿਨਾਂ ਪਹੁੰਚਯੋਗ, ਕੀਬੋਰਡ-ਅਨੁਕੂਲ ਸੰਕੁਚਿਤ ਸਮਗਰੀ ਦਿੰਦਾ ਹੈ — ਪਲੇਟਫਾਰਮ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਇੱਕ ਸਹੀ ਉਦਾਹਰਣ। ਕਸਟਮ accordion ਬਣਾਉਣ ਤੋਂ ਪਹਿਲਾਂ FAQs ਅਤੇ "ਹੋਰ ਦਿਖਾਓ" ਪੈਟਰਨ ਲਈ ਇਸਨੂੰ ਵਰਤੋ।