<details>
Misol
Foydalanuvchi xohlagancha ochishi va yopishi mumkin bo‘lgan tafsilotlarni belgilang:
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
<details> tegi foydalanuvchi xohlagancha ochishi va yopishi mumkin bo‘lgan qo‘shimcha tafsilotlarni belgilaydi.
<details> tegi ko‘pincha foydalanuvchi ochishi va yopishi mumkin bo‘lgan interaktiv vidjet yaratish uchun ishlatiladi. Standart holatda vidjet yopiq bo‘ladi. Ochilganda u kengayadi va ichidagi kontentni ko‘rsatadi.
<details> tegi ichiga istalgan turdagi kontentni joylashtirish mumkin.
Maslahat: <summary> tegi tafsilotlar uchun ko‘rinadigan sarlavhani belgilash maqsadida <details> bilan birgalikda ishlatiladi.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi raqamlar elementni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Element | |||||
|---|---|---|---|---|---|
| <details> | 12 | 79 | 49 | 6 | 15 |
| name | 120 | 120 | 130 | 17.2 | 106 |
Atributlar
| Atribut | Qiymat | Tavsif |
|---|---|---|
| open | open | Tafsilotlar foydalanuvchiga ko‘rinib turishi (ochiq bo‘lishi) kerakligini belgilaydi |
| name | groupname | Guruh nomini belgilaydi — bir nechta <details> elementi uchun bir xil nom ishlatilganda, foydalanuvchi bir vaqtda faqat bitta dialog oynasini ocha oladi |
Global atributlar
<details> tegi HTML’dagi global atributlarni ham qo‘llab-quvvatlaydi.
Hodisa atributlari
<details> tegi HTML’dagi hodisa atributlarini ham qo‘llab-quvvatlaydi.
Ko‘proq misollar
Misol
<details> va <summary> ni bezash uchun CSS’dan foydalaning:
<html>
<style>
details > summary {
padding: 4px;
width: 200px;
background-color: #eeeeee;
border: none;
box-shadow: 1px 1px 2px #bbbbbb;
cursor: pointer;
}
details > p {
background-color: #eeeeee;
padding: 4px;
margin: 0;
box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
</body>
</html>
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
HTML DOM ma’lumotnomasi: Details obyekti
Standart CSS sozlamalari
Ko‘pchilik brauzerlar <details> elementini quyidagi standart qiymatlar bilan ko‘rsatadi:
details {
display: block;
}
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!