Merhabalar,
Bu yazımda Html, Css ve Javascript kullanarak nasıl katlanabilir açıklama satırı yaparsınız bundan bahsedeceğim. Bu satır tipi genellikle aşırı derecede bilgi bulunan sitelerde kullanılmakla birlikte Web Developer'lara oldukça kolaylık sağlamakta. Gayet güzel bir özellik olan ve benimde oldukça sevdiğim bu satırı size açıklayıcı bir şekilde anlatmaya çalıştım umarım beğenirsiniz.
Bu kodları, katlanabilir satırımıza tıkladığımz zaman sayfanın alt tarafına genişleyecek şekilde yazacağım.
Hadi başlayalım;
Yukarıdaki Html kodlarımızda katlanabilir açıklama satırlarımız için birer button etiketi oluşturup her bir açıklama satırımız için içerisine istediğimiz açıklama metinlerini yazıyoruz.
Butonların üzerindeki yazılar vb. metin alanlarını kendinize göre düzenleyebilirsiniz.
Evet buradaki Css kodumuz ile katlanabilir açıklama satırlarımızın renklerini, uzunluklarını vb. belirliyoruz. Ardından katlanabilir açıklama satırlarımızı aktif hale getirdiğimiz zaman satırlarımızın sahib olacağı özellikleri belirliyoruz. Css ile yapacağımız temel işlerde bu kadar.
Yukarıdaki Javascript kodlarımızda katlanabilir satırlarımıza tıkladığımızda gerçekleşecek fonksiyonları ve bu fonksiyonların özelliklerini belirliyoruz.
İnceleyebilmeniz için Codepen üzerinden de size yapılan işlemi bırakayım.
See the Pen Untitled by Hüseyin Çınar (@huseyin-cinar) on CodePen.
Evet sizde bu şekilde test edebilirsiniz. Umarım işinize yarar.
Mutlu Kodlamalar :)
