HTML5 ile Açılır - Kapanır Uyugulama details Etiketi

<details> etiketi, başlangıçta gizlenen, ancak kullanıcı görmek isterse görüntülenebilecek içerik / bilgi için kullanılır. Bu etiket, kullanıcının açabileceği veya kapatabileceği etkileşimli pencere öğesi oluşturmak için kullanılır. details etiketinin içeriği, ayarlanan özellikleri açtığınızda görülebilir.

Aslında bu etkileşimi sık sık görüyoruz, Genelde javascript ve Kütüphanesi JQuery kullanarak yapıyorduk. Şimdi, bu yeni HTML5 details ve summary öğelerini kullanarak işler daha kolay olacak.

<details>
  <summary>Lorem Ipsum Nedir?</summary>
  <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>
  <p>Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek 
  değişmeden elektronik dizgiye de sıçramıştır. </p>
</details>

ÇIKTI:

Etikete Özel Nitelikler

Aşağıdaki tabloda, <details> etikete özgü özellikleri gösterilmektedir.

Açık Biçiminde Açıklama Kutusu Oluşturma

Details Etiketi varsayılan olarak kapalı şekilde tanımlanır; Ancak Boolean open niteliğini ekleyin o içeriğin açık halde başlamasını tanımlar.

<details open>
  <summary>Lorem Ipsum Nedir?</summary>
  <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>
  <p>Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek 
  değişmeden elektronik dizgiye de sıçramıştır. </p>
</details>

ÇIKTI:

Şimdi details etiketini css ile özelleştirip Akerdion menü haline getirelim.

CSS:

.akerdion {
border: 1px solid #999;
border-radius: 5px;
margin:2px;
padding: 1.04%;
} 
.ozet {
border-radius: 5px;
cursor: pointer;
margin: -1%;
padding: 8px 10px;
background: -webkit-linear-gradient(top, #f3f3f3 50%, #e6e6e6 50%);
}
	

HTML:

<details class="akerdion">
  <summary class="ozet" >BAŞLIK 1</summary>
  <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>
</details>

<details class="akerdion">
  <summary class="ozet" >BAŞLIK 2</summary>
  <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>
</details>

<details class="akerdion">
  <summary class="ozet" >BAŞLIK 3</summary>
  <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>
</details>

Akerdionun "ok" işeretini, css ile Açıkken "-" işareti kapalıyken "+" işareti yapalım.

/* Chrome, Opera, Safari */
details summary::-webkit-details-marker {
display: none;
}
/* Firefox */
details, summary {
display: block;
}
details summary:before {
content: " + ";
}
details[open] summary:before {
content: " - ";
}

ÇIKTI: