HTML <details>

<details> — foydalanuvchi ochib-yopishi mumkin bo’lgan yashiriladigan bo’lim yaratadigan teg. Standart holatda kontent yashirin turadi; foydalanuvchi bosganda ochiladi. Bu “ko’proq o’qish”, FAQ yoki qo’shimcha izohlar uchun ideal — JavaScriptsiz, faqat HTML bilan.

<details> — ochilib-yopiladigan (accordion) bo’lim yaratadigan teg. <summary> bilan birga ishlatiladi va JavaScript talab qilmaydi.

Oddiy foydalanish

<details> ichida <summary> — doim ko’rinadigan sarlavha, qolgan kontent esa yashirin:

<details>
    <summary>UzbekDevs haqida</summary>
    <p>UzbekDevs — dasturlashni o'rgatuvchi platforma.</p>
</details>

▶ UzbekDevs haqida
(bosilganda ochiladi:)
▼ UzbekDevs haqida
   UzbekDevs — dasturlashni o'rgatuvchi platforma.

<summary> ichidagi “UzbekDevs haqida” doim ko’rinadi. Foydalanuvchi uni bosganda, qolgan matn ochiladi yoki yopiladi. Yonidagi uchburchak belgisi holatni ko’rsatadi.

open atributi

Standart holatda <details> yopiq bo’ladi. open atributi uni boshidanoq ochiq ko’rsatadi:

<details open>
    <summary>Muhim eslatma</summary>
    <p>Bu bo'lim boshidanoq ochiq.</p>
</details>

▼ Muhim eslatma
   Bu bo'lim boshidanoq ochiq.

open atributi tufayli bo’lim sahifa yuklanganda darhol ochiq turadi. Foydalanuvchi uni baribir yopishi mumkin.

Nega <details> foydali?

<details> ning asosiy afzalliklarini jadvalda ko’ramiz:

Qayerda ishlatiladi?

<details> FAQ (savol-javob) bo’limlari, “ko’proq o’qish” havolalari, texnik tafsilotlar yoki uzun ro’yxatlarni yashirishda ishlatiladi. Uning eng katta afzalligi — hech qanday JavaScript yozmasdan interaktiv, ochilib-yopiladigan bo’lim yaratish. Bu kodni sodda va ishonchli qiladi.

Xulosa

Bu bo’limda <details> tegini, <summary> bilan ochilib-yopiladigan bo’lim yaratishni, open atributini va foydalarini ko’rib chiqdik. <details> — JavaScriptsiz interaktivlik namunasi. Keyingi darsda <dialog> tegiga o’tamiz.