HTML details va summary: JavaScript'siz ochiladigan blok va akkordeon

Qisqacha: details — bosilganda ochilib-yopiladigan blok, summary esa uning doim ko'rinadigan sarlavhasi. Bu ikki teg JavaScript'siz ishlaydi: klaviatura ham, ekran o'quvchi ham ularni o'zi tushunadi. Bir nechta details ga bir xil name bersangiz, ular akkordeonga aylanadi — bittasi ochilsa, qolganlari yopiladi.

Bu darsda

• details va summary bilan ochiladigan blok yoza olasiz.
• open atributi bilan blokni boshidan ochiq qilasiz.
• name atributi bilan "faqat bittasi ochiq" akkordeon yasaysiz va uning Baseline holatini bilasiz.
• Yopiq blok ichidagi matnni Ctrl + F topishi va hidden="until-found" nima ekanini tushuntira olasiz.
• details qachon o'rinli va qachon zararli ekanini ajratasiz.

Oldin bilishingiz kerak: Guruhlash va natija elementlari, Tugma yoki havola: to'g'ri tanlov, Zamonaviy forma imkoniyatlari.

1. Nega bu kerak?

Formalar modulini tugatdik. Endi «Bahor» choyxonasining boshqa sahifalariga qaytamiz. Choyxona egasi Jasur aka ikki muammo bilan keldi.

Birinchisi — menyu. Unda 40 dan ortiq taom bor: issiq taomlar, salatlar, shirinliklar, ichimliklar. Telefonda mehmon choyni topguncha uzoq aylantiradi. Ikkinchisi — "Ko'p so'raladigan savollar" sahifasi. Unda 12 ta savol va 12 ta uzun javob bor. Mehmon o'z savolini ko'rmasdan charchab qoladi.

Ikkala muammoning yechimi bitta: sarlavhalar doim ko'rinsin, ichidagi matn esa faqat bosilganda ochilsin.

Aslida bu narsani siz har kuni ishlatyapsiz. Shu kursdagi har bir "Javob" va "Yechim" tugmasini eslang. Bosasiz — javob ochiladi, yana bosasiz — yopiladi. Bu aynan bugungi darsning elementi: details. Bu yerda hech qanday JavaScript yo'q.

2. Birinchi details

2.1 Ikki teg

Tafsilotlar bloki (details) — ichidagi kontentni yashirib turadigan va bosilganda ochadigan element. Qisqa sarlavha (summary) — shu blokning doim ko'rinadigan qismi, uni bosib blokni ochasiz.

Hayotdan o'xshatish: dori qutisi. Qutining ustida nomi yozilgan — bu summary. Ichidagi yo'riqnoma esa faqat qutini ochganda ko'rinadi — bu qolgan kontent.

Choyxonaning savol-javob sahifasidan bitta savol:

<details>
  <summary>Bronni qanday bekor qilaman?</summary>
  <p>Bron vaqtidan kamida 2 soat oldin qo'ng'iroq qiling:
    +998 90 000 00 00.</p>
</details>

Brauzerda boshida shunday ko'rinadi:

▶ Bronni qanday bekor qilaman?

Sarlavhani bosgandan keyin:

▼ Bronni qanday bekor qilaman?
Bron vaqtidan kamida 2 soat oldin qo'ng'iroq qiling:
+998 90 000 00 00.

Uchburchak belgini brauzer o'zi chizadi. U yopiq blokda o'ngga, ochiq blokda pastga qaraydi.

2.2 Uch qoida

• summary — details ning birinchi bolasi. Xuddi fieldset dagi legend kabi (Guruhlash darsida ko'rgandik). Bu standart talabi.
• summary dan keyin istalgan kontent keladi: paragraf, ro'yxat, rasm, jadval, hatto forma.
• Bitta details da bitta summary bo'ladi.

summary ni umuman yozmasangiz nima bo'ladi? Blok baribir ishlaydi. Lekin brauzer sarlavhaga o'zidan "Details" (yoki brauzer tilidagi shunga o'xshash so'z) deb yozadi. Mehmon ichida nima borligini bilmaydi. Shuning uchun summary ni doim yozing.

2.3 Tekin keladigan imkoniyatlar

details — tayyor, "aqlli" element. Uni ishlatsangiz, quyidagilarni o'zingiz yozishingiz shart emas:

Ekran o'quvchi summary ni tugma deb ataydi. Chunki u bosilganda ish bajaradi — Tugma yoki havola darsidagi qoidani eslang. "Yig'ilgan" (collapsed) yoki "yoyilgan" (expanded) so'zi esa hozirgi holatni aytadi.

Maslahat: O'zingiz sinab ko'ring. Yuqoridagi kodni savollar.html faylga yozib, Live Server bilan oching. Sichqonchani ishlatmasdan faqat Tab va Enter bilan blokni ochib-yoping.

Tekshirib ko'ring: Mehmon sahifani ochdi. details ichidagi paragraf ekranda ko'rinadimi?

3. open: boshidan ochiq blok

3.1 Atribut

Ba'zan birinchi blok boshidanoq ochiq turgani yaxshi. Masalan, menyuda "Bugungi taklif" bo'limi. Buning uchun open atributi bor:

<details open>
  <summary>Bugungi taklif</summary>
  <p>Osh va ko'k choy — 38 000 so'm.</p>
</details>

open — boolean atribut. Teg, element va atribut darsida ko'rganimizdek, uning qiymati yo'q: bor bo'lsa — ochiq, yo'q bo'lsa — yopiq.

3.2 Brauzer atributni o'zi o'zgartiradi

Bir tajriba qiling. Sahifani oching va F12 bilan Elements panelini oching (DevTools darsida ishlatgan edik). Endi sahifadagi yopiq details ning sarlavhasini bosing.

Elements panelida details tegiga qarang: unga open atributi o'zi qo'shildi. Yana bossangiz — atribut yo'qoladi. Ya'ni open — blokning hozirgi holati. Brauzer uni mehmonning har bosishida yangilab boradi.

Bu keyinchalik CSS va JavaScript uchun qulay. CSS "ochiq blokni boshqacha bo'ya" deya oladi, JavaScript esa "blok ochildimi?" deb so'ray oladi. Ikkalasiga keyingi qismlarda qaytamiz.

Tekshirib ko'ring: Doniyor blokni yopiq qilmoqchi bo'lib open="false" deb yozdi. Blok qanday ko'rinadi?

4. name: faqat bittasi ochiq akkordeon

4.1 Muammo

Menyuni uchta blokka ajratdik: issiq taomlar, salatlar, ichimliklar. Mehmon uchalasini ochdi — va sahifa yana uzun bo'lib qoldi. Yaxshisi: bittasi ochilganda qolganlari o'zi yopilsin.

Bunday tuzilma akkordeon (accordion) deyiladi. Nomi garmondan olingan: uning "burmalari" biri cho'zilsa, boshqasi yig'iladi.

Uzoq yillar akkordeon faqat JavaScript bilan yasalardi. Endi buning uchun HTML atributi bor.

4.2 Bir xil name — bitta guruh

Bir nechta details ga bir xil name beramiz:

<details name="menyu" open>
  <summary>Issiq taomlar</summary>
  <p>Osh — 35 000 so'm. Lag'mon — 28 000 so'm.</p>
</details>
<details name="menyu">
  <summary>Salatlar</summary>
  <p>Achchiq-chuchuk — 12 000 so'm. Vinegret — 15 000 so'm.</p>
</details>
<details name="menyu">
  <summary>Ichimliklar</summary>
  <p>Ko'k choy — 5 000 so'm. Kompot — 8 000 so'm.</p>
</details>

Endi "Salatlar" ni bossangiz, "Issiq taomlar" o'zi yopiladi. Bir vaqtda guruhda ko'pi bilan bitta blok ochiq turadi. Guruh tarkibi name qiymati bilan aniqlanadi.

Bu sizga tanish g'oya. Tanlash maydonlari darsida radio tugmalarni eslang: bir xil name li radiolardan faqat bittasi tanlanadi. details dagi name ham xuddi shunday ishlaydi.

Bo'sh joyni to'ldiring: bir-birini yopadigan details bloklarining qaysi atributi bir xil bo'lishi kerak?

4.3 Nozik qoidalar

• Hammasini yopish mumkin. Ochiq blokning sarlavhasini bossangiz, u yopiladi va guruhda birorta ham ochiq blok qolmaydi. Radio tugmadan farqi shu.
• Bir nechta open. Guruhda ikkita blokka open yozsangiz, brauzer faqat sahifada birinchi turganini ochiq qoldiradi.
• Har xil nom — har xil guruh. Sahifada name="menyu" va name="savollar" guruhlari bo'lsa, ular bir-biriga ta'sir qilmaydi.
• Nom sahifa ichida ishlaydi. Guruhdagi bloklarni yonma-yon qo'ying — tarqoq bloklar bir-birini yopsa, mehmon hayron qoladi.

name qiymati serverga yuborilmaydi — u forma maydoni emas. Qiymatni o'zbekcha, kichik harf va chiziqcha bilan yozing: menyu, tez-savollar.

4.4 Qaysi brauzerlarda ishlaydi

Zamonaviy forma imkoniyatlari darsida har yangi narsaning Baseline holatini tekshirishni o'rgandik. details ning o'zi 2020-yildan beri hamma joyda bor. name esa yangiroq:

Firefox oxirgi bo'lib qo'shgani uchun name 2024-yil sentabridan Newly available. "Widely available" bo'lishiga 30 oy kerak — ya'ni taxminan 2027-yil martgacha. Bu ma'lumot 2026-yil sentabr holatiga: ishlatishdan oldin MDN'da qayta tekshiring.

Eski brauzerda nima bo'ladi? name jimgina e'tiborsiz qoldiriladi. Bloklar mustaqil ochilib-yopiladi, xuddi name siz. Menyu baribir to'liq ishlaydi, faqat biroz uzunroq bo'ladi. Bu — progressive enhancement: yangi brauzerda qulayroq, eskisida ham buzilmaydi. Shuning uchun name ni bugun bemalol ishlatsa bo'ladi.

Tekshirib ko'ring: Sahifada to'rtta blok bor: ikkitasida name="menyu", ikkitasida name yo'q. Mehmon to'rttalasini ketma-ket bosdi. Oxirida nechta blok ochiq?

5. Yopiq blok ichidagi matnni qidirish

5.1 Ctrl + F yopiq blokni ochadi

Mehmon menyuda "kompot" so'zini Ctrl + F bilan qidirdi. Lekin "Ichimliklar" bloki yopiq. Nima bo'ladi?

Chrome, Edge va Firefox (148-versiyadan) so'zni yopiq details ichidan ham topadi va blokni o'zi ochadi. Safari'da bu imkoniyat hozircha qisman ishlaydi. Ya'ni yashirilgan matn qidiruvdan ham "yashirinib" qolmaydi. Oddiy yashirilgan matnda bunday emas — keyingi bo'limda ko'ramiz.

5.2 hidden="until-found"

HTML'da har qanday elementni yashiradigan hidden atributi bor. Uni Global atributlar darsida to'liq ko'ramiz. Hozir bilish kifoya: hidden li element ekranda ham, Ctrl + F da ham, ekran o'quvchida ham yo'q.

hidden="until-found" ("topilguncha yashirin") esa boshqacha. Element ko'rinmaydi, lekin ikki holatda brauzer uni o'zi ochadi:

• mehmon Ctrl + F bilan uning ichidagi so'zni topsa;
• mehmon shu elementning id siga havola orqali kelsa (Sahifa ichidagi havolalar darsidagi #id).

<h2>Ko'p so'raladigan savollar</h2>
<h3>Oldindan to'lov kerakmi?</h3>
<div id="tolov" hidden="until-found">
  <p>Oddiy bron uchun — yo'q. Tug'ilgan kun va 10 kishidan
    katta tadbirlar uchun har mehmonga 20 000 so'm oldindan
    olinadi.</p>
</div>

Kimdir savollar.html#tolov havolasini ochsa, bu blok o'zi ko'rinadi.

Qachon kerak? details mos kelmaydigan joylarda: masalan, o'zingiz CSS va JavaScript bilan yasagan tablarda. Oddiy "bosib ochiladigan" blok uchun esa details yetarli — u buni allaqachon qiladi.

Diqqat: hidden="until-found" hali Limited availability: Chrome va Edge'da (102 dan) va Firefox'da (148 dan) bor, Safari'da qisman. Tanimaydigan eski brauzer uni oddiy hidden deb tushunadi: matn butunlay yashirinadi va hech qanday usul bilan ochilmaydi. Shuning uchun uni faqat blokni ochadigan boshqa yo'l (tugma) bor joyda ishlating.

6. Ko'rinish va ichki tuzilma

6.1 Uchburchak belgi

Sarlavha yonidagi uchburchak — marker. Uni o'zgartirish, olib tashlash yoki o'z ikonkangizga almashtirish mumkin. Lekin bu CSS ishi: ::marker bilan Pseudo-elementlar darsida, chiroyli akkordeon esa Tabs va accordion darsida. U yerda blok silliq ochiladigan animatsiyani ham qo'shamiz.

Hozir HTML tomonida bitta qoida: uchburchakni o'chirsangiz ham, sarlavha bosiladigan ekani ko'rinib tursin. Masalan, oxirida "+" belgisi yoki "Batafsil" so'zi bilan.

6.2 summary ichida nima bo'lishi mumkin

summary ichida oddiy matn, strong, em, rasm va hatto sarlavha (h2–h6) bo'lishi mumkin:

<details>
  <summary><h3>Issiq taomlar</h3></summary>
  <p>Osh, lag'mon, manti.</p>
</details>

Sarlavha sahifa mundarijasini saqlaydi — Sarlavhalar va paragraflar darsida buning ahamiyatini ko'rgandik. Faqat bir narsani biling: ba'zi ekran o'quvchilar tugma ichidagi sarlavhani sarlavha sifatida sezmaydi. Bu hali ham muhokama qilinadigan mavzu, ikkala variant ham uchraydi.

summary ichiga havola va tugma qo'ymang. summary o'zi tugma, tugma ichidagi tugma esa Tugma yoki havola darsidagi "interaktiv ichida interaktiv" xatosi. Mehmon havolani bosmoqchi bo'ladi — blok ochiladi yoki aksincha.

6.3 Ichma-ich details

Blok ichida yana blok bo'lishi mumkin. Masalan, "Issiq taomlar" ichida har taomning tarkibi:

<details>
  <summary>Issiq taomlar</summary>
  <details>
    <summary>Osh — 35 000 so'm</summary>
    <p>Guruch, sabzi, mol go'shti, no'xat, mayiz.</p>
  </details>
</details>

Ikki qavatdan oshirmang. Chuqur ichma-ich bloklarda mehmon qayerda ekanini unutadi.

Tekshirib ko'ring: Nega summary ichiga "Menyuni yuklab olish" havolasini qo'yish yomon fikr?

7. Qachon details, qachon emas

details kontentni yashiradi. Yashirilgan narsani esa kimdir ko'rmay qoladi. Shuning uchun qaror oddiy savolga bog'liq: bu ma'lumotni hamma o'qishi shartmi?

Subtitrlar darsida uzun video transkriptini ochiladigan blokda berish mumkinligini aytgan edik — mana u:

<details>
  <summary>Videoning matni (transkript)</summary>
  <p>Assalomu alaykum! Bugun «Bahor» oshpazi Rustam aka
    choyxona oshini qanday damlashni ko'rsatadi...</p>
</details>

Navigatsiya menyusi uchun keyingi darslardagi popover yaxshiroq. Tablar uchun esa details emas, alohida tuzilma kerak — Tabs va accordion darsida.

8. «Bahor»: menyu sahifasi

Menyuni akkordeonga aylantiramiz. Qaysi qarorlar qabul qilinganiga e'tibor bering:

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>Menyu — Choyxona «Bahor»</title>
</head>
<body>
  <main>
    <h1>Menyu</h1>
    <p>Narxlar so'mda. Non har stolga bepul.</p>

    <details name="menyu" open>
      <summary>Issiq taomlar</summary>
      <ul>
        <li>Osh — 35 000</li>
        <li>Lag'mon — 28 000</li>
        <li>Manti (5 dona) — 30 000</li>
      </ul>
    </details>

    <details name="menyu">
      <summary>Salatlar</summary>
      <ul>
        <li>Achchiq-chuchuk — 12 000</li>
        <li>Vinegret — 15 000</li>
      </ul>
    </details>

    <details name="menyu">
      <summary>Ichimliklar</summary>
      <ul>
        <li>Ko'k choy (choynak) — 5 000</li>
        <li>Kompot (1 litr) — 8 000</li>
      </ul>
    </details>
  </main>
</body>
</html>

Qarorlar:

• "Non bepul" — details dan tashqarida. Bu hamma bilishi kerak bo'lgan ma'lumot.
• Birinchi blok open — mehmon sahifani ochganda bo'sh sarlavhalar ro'yxatini emas, taomlarni ko'radi.
• Bir xil name="menyu" — telefonda sahifa qisqa qoladi. Eski brauzerda esa bloklar shunchaki mustaqil ochiladi.
• Narxlar ro'yxatda — Ro'yxatlar darsidagi ul. details ichida oddiy HTML ishlaydi.

Kod html-validate dan xatosiz o'tadi.

9. Ko'p uchraydigan xatolar

9.1 summary birinchi emas

<!-- ❌ summary oxirida -->
<details>
  <p>Osh — 35 000 so'm.</p>
  <summary>Issiq taomlar</summary>
</details>

Brauzer xato bermaydi va ko'pincha summary ni baribir tepaga chiqarib ko'rsatadi. Shuning uchun xato sezilmay qoladi. Lekin bu standart qoidasini buzadi: kodni o'qigan boshqa dasturchi chalkashadi, har brauzer esa bunday kodni bir xil ko'rsatishga majbur emas. html-validate ushlaydi:

Element <summary> must be used before <p> in this context

Tarjimasi: "Bu joyda summary elementi p dan oldin ishlatilishi kerak." Tuzatish: summary ni details ichida birinchi qatorga ko'chiring.

9.2 open="false"

Boolean atributning qiymati hisobga olinmaydi — blok baribir ochiq. html-validate ikki xato beradi: Attribute "open" should omit value ("open atributi qiymatsiz yozilsin") va has invalid value "false" ("noto'g'ri qiymat"). Tuzatish: yopiq blok uchun open ni butunlay olib tashlang.

9.3 Har blokka har xil name

<!-- ❌ har biri o'z guruhida -->
<details name="menyu-1">...</details>
<details name="menyu-2">...</details>

Endi har blok alohida guruhda va hech biri boshqasini yopmaydi. name — id emas, u takrorlanmas bo'lishi shart emas. Aksincha, akkordeon uchun u takrorlanishi kerak.

9.4 Soxta akkordeon

div, bosiladigan span va JavaScript bilan yasalgan akkordeon hali ko'p saytlarda bor. Unda klaviatura, ekran o'quvchi va Ctrl + F ni qo'lda yozish kerak — va ko'pincha unutiladi. Oddiy ochiladigan blok uchun details yetarli.

9.5 Muhim ma'lumotni yashirish

"Bron qilish uchun oldindan to'lov shart" degan gapni yopiq blokka qo'ysangiz, ko'p mehmon uni o'qimaydi. Keyin choyxonada norozilik chiqadi. Tuzatish: qoidalar, narx va ogohlantirishlar doim ochiq tursin.

10. Mashqlar

1-mashq (oson): Bitta savol

«Bahor» savollar sahifasiga savol qo'shing: "Bolalar uchun menyu bormi?". Javob: "Ha: kichik porsiya osh va sho'rva, narxi yarmiga teng." Blok boshida yopiq bo'lsin.

<details>
  <summary>Bolalar uchun menyu bormi?</summary>
  <p>Ha: kichik porsiya osh va sho'rva, narxi yarmiga teng.</p>
</details>

2-mashq (o'rta): Savollar akkordeoni

Uchta savoldan iborat akkordeon yozing: "Ish vaqti qanday?", "Avtoturargoh bormi?", "Karta bilan to'lasa bo'ladimi?". Javoblarni o'zingiz o'ylab toping. Talab: bir vaqtda faqat bitta javob ochiq tursin, boshida hammasi yopiq bo'lsin.

Keyin savolga javob bering: bu sahifa 2023-yilgi Firefox'da qanday ishlaydi?

<details name="savollar">
  <summary>Ish vaqti qanday?</summary>
  <p>Har kuni 7:00 dan 23:00 gacha.</p>
</details>
<details name="savollar">
  <summary>Avtoturargoh bormi?</summary>
  <p>Ha, choyxona orqasida 15 ta joy bor, bepul.</p>
</details>
<details name="savollar">
  <summary>Karta bilan to'lasa bo'ladimi?</summary>
  <p>Ha: Uzcard, Humo, Click va Payme.</p>
</details>

3-mashq (qiyin): Qaysi biri noto'g'ri?

Doniyor choyxonaning "Biz haqimizda" sahifasini yozdi. Kodda to'rtta muammo bor: ikkitasini html-validate topadi, ikkitasini esa faqat odam ko'radi. Hammasini toping va tuzating.

<!-- ❌ bu kodda muammolar bor -->
<details open="true">
  <p>Har kuni 7:00 dan 23:00 gacha.</p>
  <summary>Ish vaqti</summary>
</details>
<details name="info-1">
  <summary>Manzil va xarita
    <a href="https://example.com/xarita">Xaritada</a>
  </summary>
  <p>Toshkent, Chilonzor, 7-mavze.</p>
</details>

Eslatma: 7-bo'limdagi jadvalni ham eslang — qaysi ma'lumot yashirilmasligi kerak edi?

<h2>Ish vaqti</h2>
<p>Har kuni 7:00 dan 23:00 gacha.</p>
<h2>Manzil</h2>
<p>Toshkent, Chilonzor, 7-mavze.</p>
<p><a href="https://example.com/xarita">Xaritada ko'rish</a></p>

11. Real ishda

• FAQ sahifalari. Bank, internet-do'kon va davlat xizmatlari saytlarida "Savol-javob" bo'limi ko'pincha aynan details bilan yoziladi. Sababi — kam kod va tekin accessibility.
• GitHub. README va izohlarda uzun loglarni details ichiga yashirish odat. Markdown ichida ham ishlaydi — xuddi shu kursdagi "Javob" bloklari kabi.
• Dizayn tizimlari. Katta kompaniyalarning komponent kutubxonalarida akkordeon endi ko'pincha details asosida quriladi, JavaScript faqat qo'shimcha bezak uchun.
• Intervyuda so'raladi: "Akkordeonni JavaScript'siz qanday yasaysiz?" Kuchli javob: "details va summary, guruh uchun name atributi. name Newly available, eski brauzerda bloklar mustaqil ochiladi".

Xulosa

• details — ochiladigan blok, summary — uning doim ko'rinadigan sarlavhasi va birinchi bolasi.
• Klaviatura, ekran o'quvchi va Ctrl + F — hammasi JavaScript'siz ishlaydi.
• open — boolean atribut va blokning hozirgi holati; brauzer uni o'zi qo'shib-olib turadi.
• Bir xil name — akkordeon: guruhda ko'pi bilan bitta blok ochiq. 2024-yildan Newly available, eski brauzerda xavfsiz.
• hidden="until-found" — Ctrl + F va #id havola ochadigan yashirish; hali Limited.
• Narx, qoida va ogohlantirishni yashirmang; summary ichiga havola qo'ymang.

Keyingi dars: dialog: native modal oyna — "Ishonchingiz komilmi?" kabi oynalarni fokus, Esc va orqa fonni o'zi boshqaradigan tayyor element bilan yasaymiz.

Manbalar

• MDN: "details" va "summary" elementlari (The Details disclosure element) — developer.mozilla.org
• MDN: "hidden" global atributi (until-found qiymati) — developer.mozilla.org
• Web Features Explorer: "details-name", "hidden-until-found" — web-platform-dx.github.io/web-features-explorer
• WHATWG HTML Living Standard: "The details element" — html.spec.whatwg.org