İçeriği gizlemek ve ortaya çıkarmak için bir akordeon daha fazla/daha az oku düğmesini çok kolay bir şekilde oluşturmak için yerel bir HTML5 çözümü olduğunu biliyor muydunuz? JavaScript veya CSS YOK. Nasıl olduğunu öğrenmek için okumaya devam edin.
The ve HTML5 etiketleri resmen bir açıklama widget öğesi, ama ile eşleştirilmiş HTML5 etiketleri size bir salt HTML akordeon.
anlam JS VEYA CSS yok gereklidir. Ne kadar serin!
İşte basit bir öğeyi gösteren bir örnek ve .
İşte kod:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>ve işte nasıl görüneceği:
Devamını Oku
Bu, içeriği gizlemek ve ortaya çıkarmak için yerel bir HTML5 akordeondur. Oldukça havalı, değil mi?
Nasıl Çalışır? The etiketi, açılabilen veya kapatılabilen bir öğe için sarmalayıcı görevi görür. Kullanıcının etikete tıklaması gerekir. öğeyi açmak veya kapatmak için etiket.
Peki ya stil ve davranış?
Modeller
Göster metin kutusunun görünümünü özelleştirmek için CSS stili uygulayabilirsiniz. Aşağıdaki sekmeli bir arayüz stili verir:
details {
font: 16px "Open Sans", Calibri, sans-serif;
width: 620px;
}
details > summary {
padding: 2px 6px;
width: 15em;
background-color: #ddd;
border: none;
box-shadow: 3px 3px 4px black;
cursor: pointer;
}
details > p {
border-radius: 0 0 10px 10px;
background-color: #ddd;
padding: 2px 6px;
margin: 0;
box-shadow: 3px 3px 4px black;
}
details[open] > summary {
background-color: #ccf;
}Varsayılan olarak, imleç bir ok gibi görünür, ancak bunun bir ok olmasını istiyorsanız işaret eden el bunun yerine bunu kullanın:
details {
cursor: pointer;
}davranışlar
Ayar davranışları çok sınırlıdır, gerçekten yapabileceğiniz tek bir şey vardır ve o da ortaya çıkan metni yapmaktır. varsayılan olarak aç.
Akordeonu açık durumda başlatmak için Boole değerini ekleyin. açık atfetmek etiket:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Devamını Oku
Bu, içeriği gizlemek ve ortaya çıkarmak için yerel bir HTML5 akordeondur. Oldukça havalı, değil mi?
Hangi nitelikleri kullanabilirim?
için aşağıdaki nitelikler kullanılabilir. etiket:
| özellik | Özellik | Özet |
|---|---|---|
| açık | açık | Varsayılan açık değil. |
| id | değer | Benzersiz bir tanımlayıcı sağlar. |
| sınıf | sınıf adları | Öğeye sınıf adları atar. |
| stil | CSS değerleri | Öğeye CSS stilleri atar. |
Peki sınırlamalar nelerdir? Her zaman bir püf noktası vardır, değil mi?
Internet Explorer desteği yok
Yalnızca HTML5 içeren bu akordeon, Internet Explorer'ın hiçbir sürümünde çalışmaz. IE11'i desteklemeniz gerekiyorsa, JQuery kullanarak farklı bir geri dönüş çözümü kullanmanız gerekecektir. Diğer tüm tarayıcılar desteği ve .
Özelleştirilmiş animasyon veya geçiş yok
Görünümü (yukarıda gösterildiği gibi) değiştirip stillendirebilseniz de, metin gösteren animasyonlar veya geçişler yapamazsınız. Bunu yapmak istiyorsanız, başka bir CSS/JSS akordeon çözümüne ihtiyacınız olacak.
Ekran okuyucular ve erişilebilirlik
bu yerli HTML5 ve erişilebilir * olmalıdır*, ancak gerçek ortaya çıkan metnin bir ekran okuyucu tarafından her zaman doğru şekilde duyurulmadığı tespit edildi.
Referanslar:
