Създайте акордеон, използвайки само CSS

В този урок ще разберем как да създадем такъв популярен елемент за дизайн на уеб страница като акордеона, използвайки само HTML и CSS (малко CSS3 ще бъде добавено, за да организира прехода между слайдовете). В резултат на това ще получим кода за две опции за акордеон - хоризонтален и вертикален.

Хоризонтален акордеон

Нека започнем с оформлението на хоризонталния акордеон. Той не съдържа нищо конкретно, само обикновен HTML:

Използваме прост неподреден списък, който съдържа няколко елемента с класове. Просто е. И CSS кодът превръща маркировката в това, от което се нуждаем:

Всичко е съвсем просто и очевидно. Първо дефинираме .accordion класа за елемента

След това преместваме елементите от списъка наляво, задаваме тяхната ширина на 20% (100% ÷ 5 = 20%) и задайте свойството overflow: hidden; да не задържа нищо извън елемента. Също така задава фиксирана височина, което е чудесно за поставяне на съдържание при разширяване на елемент от списък.

За динамичен ефект при разширяване на елемент от списък задаваме време за преход от 0,2 секунди и ефект на плавен преход.

След това много полезните селектори: first- и: last-of-type се използват за задаване на заоблени ъгли отгоре вляво и отдолу за първия елемент от списъка и съответно отгоре вдясно и отдолу за последния елемент от списъка.

След това задаваме подложката на 10 px за елемента

Сега настройваме функционалността на акордеона:

Това правило гласи следното: веднага щом курсорът на мишката е над елемента