HTML <details> Etiketi

Tanım ve Kullanım

<details> etiketi, kullanıcıların ihtiyacına göre açıkça ve kapatılabilir diğer detayları belirlemek için kullanılır.

<details> etiketi genellikle kullanıcıların açıkça ve kapatılabilir etkileşimli bileşenler oluşturmak için kullanılır. Varsayılan olarak, bileşen kapalıdır. Açılırsa, içeriğini genişletir ve gösterir.

Her türlü içerik, <details> etiketinde.

İpucu:<summary> etiketi ile <details> Birlikte kullanıldığında, detaylara görünen bir başlık belirleyebilirsiniz. Başlık üzerine tıkladığınızda, <details> Tanımlanan içerik.

Ayrıca bakınız:

HTML DOM Referans Kılavuzu:Details Nesnesi

Örnek

Örnek 1

Kullanıcıların ihtiyacına göre açıkça ve kapatılabilir detaylar tanımlayın:

<details>
  <summary>Gelecek Dünyası Merkezi (Epcot Center)</summary>
  <p>Epcot, Walt Disney World Tatil Bölgesi'nde bulunan bir temalı parktır, heyecan verici yerler, uluslararası sergiler, ödüllü havai fişek gösterileri ve mevsimsel etkinliklere sahiptir.</p>
</details>

Kendi Kendine Deneyin

Örnek 2

CSS ile <details> ve <summary> stillerini ayarlayın:

<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>Gelecek Dünyası Merkezi (Epcot Center)</summary>
  <p>Epcot, Walt Disney World Tatil Bölgesi'nde bulunan bir temalı parktır, heyecan verici yerler, uluslararası sergiler, ödüllü havai fişek gösterileri ve mevsimsel etkinliklere sahiptir.</p>
</details>
</body>
</html>

Kendi Kendine Deneyin

Özellik

Özellik Değer Açıklama
open open Açıklamaların kullanıcıya görünür olmasını (açık) belirler

Genel Özellikler

<details> Bu etiketler ayrıca HTML'deki genel özellikler.

olay özelliklerini destekler

<details> Bu etiketler ayrıca HTML'deki olay özellikleri.

Varsayılan CSS Ayarları

Çoğu tarayıcı aşağıdaki varsayılan değerleri kullanarak görüntüleyecektir <details> Element:

details {
  display: block;
}

Tarayıcı Desteği

Tablo içindeki numaralar, bu elementi tamamen destekleyen ilk tarayıcı sürümünü belirtir.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
12.0 79.0 49.0 6.0 15.0