Uzun içerikli yapıları daha az yer kaplayacak şekilde ve daha işlevsel kullanmak için genelde akordiyon yapılarını kullanırız. Uzun süredir kullanıla gelen bu bileşenlerin genelde işlevselliğini javascript ile yapıyoruz. HTML ve CSS ile yapılan akordiyonlar için son günlerde gelen name attribute ile işlevsellik yönünden eksik kalan kısım tamamlandı.
name attribute tam olarak ne sağlıyor?
<details> ve <summary> kullanımı ile oluşturduğumuz akordiyonlar başlığa tıkladığımızda açılan detay içeriği gösteriliyor. Biz daha çok başlığa tıklandığında açılıyor ve aynı zamanda açık olan başka içerik kapanıyor.
Örneklerde daha iyi anlarız.
Örnekleri trendyol’da geliştirdiğimiz baklava tasarım sisteminde uyguladığımız tasarımları kullandım. Bu arada görmeyenler için baklava github linkini de buraya ekliyeyim. https://github.com/Trendyol/baklava/
Bir diğer not da baklava design system açık kaynak bir proje katılıp katkı verebileceğiniz güzel bir proje olduğunu düşünüyorum. Katkılarınızı bekleriz.
Mevcut akordiyon (checkbox gibi)
Mevcut durumda kullanılan ve tarayıcı desteği gayet iyi olan tip bu.
Yukarıdaki örnekte sadece HTML ve CSS kullandık. Kendi stillerimizi uyguladık sadece.
name ile oluşturulan akordiyon (radio gibi)
Chrome 120 ve Safari 17.2 ile birlikte gelen name özniteliği desteği ile artık tıklanan ögenin dışındakileri kapatan akordiyonları da yapabileceğiz.
Eğer Chrome ve Safari’nin developer sürümlerini yüklemediyseniz yukarıdaki kod sizde bir öncekiyle aynı gözükecektir.
Açık gelen akordiyon
Başlangıç durumunda bir akordiyon elemanının açık gelmesini istiyorsanız. Açık gelmesini istediğiniz akordiyon elemanında open öz niteliğini eklemeniz yeterli. Örnek: <details open>
Örnekte görüldüğü gibi ikinci öge açık olarak belirtildiği için açık gelmiştir.
Sonuç
W3C’nin tarayıcıların bünyesindeki bileşenleri arttırma ve geliştirme çabalarını takdir ile karşılıyorum. Her projede ayrı ayrı kod yazmaktan ve uğraşmaktan kurtarıyor, erişebilirlik sorunlarını çözüyor. Standart bir tasarım desteği sunuyor. Umarım bir çok UI kütüphanesindeki bileşenler bu şekilde eklenir.
Kalın sağlıcakla.
Kaynaklar
- https://open-ui.org/components/accordion.explainer/
- https://www.zachleat.com/web/details-utils/
- https://blog.openreplay.com/creating-accordions-with-just-html-and-css/
- https://x.com/jh3yy/status/1707939551312765206?s=20
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
- https://web.dev/learn/html/details?hl=en
- https://www.scottohara.me/blog/2022/09/12/details-summary.html
- https://12daysofweb.dev/2021/details-summary/
- https://css-tricks.com/how-to-animate-the-details-element/
- https://stackoverflow.com/questions/38213329/how-to-add-css3-transition-with-html5-details-summary-tag-reveal
- https://medium.com/@jgustavo.wd/solved-how-to-fully-animate-the-details-html-element-with-only-css-no-javascript-b7d32c53a9d7
- https://codepen.io/stepfray/pen/LYWYxPM animasyon
- https://x.com/jensimmons/status/1724885940416450810?s=20 Safari desteği de geldi.
- https://github.com/atherosai/ui/blob/main/accordion-04/index.html Örnek akordiyon