რა აწვდის details და summary ელემენტებმა?

Question

Accepted Answer

`

` და `

` აქმენ **ნაციონალური ამჟამინჯახ ვიჯეტი** — გაშლადი/შეკრებადი განყოფილება — **ნულოვანი JavaScript-ით**. ბრაუზერი ფიქრობს გადინებას, კლავიატურის მხარდაჭერას და ხელმისაწვდომობას თქვენთვის. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** არის დაწკაპუნებული ეტიკეტი (პირველი შვილი). - ის ყველაფერი რაც მის შემდეგ მოდის არის შეკრებადი კონტენტი. - summary-ის დაწკაპუნება გაშლილს/შეკრებულს აკეთებს ნაციონალურად — კლავიატურით ხელმისაწვდომი (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-ებისთვის და "მეტი დეტალი" ნიმუშებისთვის თქვენი აკორდეონის აგებამდე.