Как да си направим един акордеон на CSS3, безплатен сайт-майстор

Типичен акордеон, но реализира само с CSS3 свойства.

Има различни варианти на акордеон, построени само на CSS. но те обикновено се използват, псевдо клас: мишена. който има недостатъци, като например невъзможността на затваряне след съдържанието на разкриване и едновременното отваряне на няколко скрити предмети.

Но с помощта на скрити Квадратчета за отметка (флагове) можем да контролираме отваряне и затваряне. И за да се само един елемент на акордеон използва бутоните за е открит в същото време.

HTML маркиране

Вземем примера, който използва Квадратчета за отметка (флагове) и когато една част от съдържанието е отворен по подразбиране (вход трябва да бъде «проверява» (маркирана).

Всичко ще бъде поставен в контейнер с AC-контейнер клас. За всеки елемент, ние ще отметката. етикет и съдържание статия.

Имайте предвид, че всеки вход, ние трябва да свържем с вашата самоличност, които ще бъдат използвани в атрибута етикет. Необходимо е да се провери в квадратчето, като кликнете върху етикета.

Всяка статия е клас, който ще ни помогне да се определи височината, на която стоката ще се отвори на акордеон. (Оптимално, то със сигурност се използва за автоматично за височина, но тогава няма да имаме анимация при отваряне).