Cum sa faci un acordeon pe CSS3, liber-site-ul de master

Un acordeon tipic, dar a realizat numai cu proprietăți CSS3.

Există diferite variante de acordeon construite doar pe CSS. dar ele sunt folosite, de obicei, o clasă pseudo: țintă. care are dezavantaje, cum ar fi imposibilitatea de închidere, după conținutul de prezentare și deschiderea simultană a mai multor elemente ascunse.

Dar, cu ajutorul checkboxes ascunse (steaguri) putem controla deschiderea și închiderea. Și pentru a numai un singur element din butoanele radio utilizate acordeon a fost deschis în același timp.

HTML markup

Luați în considerare exemplul care utilizează casete de selectare (steaguri) și, dacă este o secțiune a conținutului este deschis în mod implicit (de intrare trebuie să fie «verificate» (marcate).

Totul va fi plasat într-un recipient cu clasa de ac-container. Pentru fiecare element, vom casetă. etichetă și conținutul articolului.

Rețineți că fiecare intrare, trebuie să atribuiți ID-ul, care va fi utilizat în atributul etichetă. Este necesar să bifați caseta de selectare făcând clic pe etichetă.

Fiecare articol este o clasa care ne va ajuta să determine înălțimea la care elementul va deschide acordeon. (Optim, cu siguranță folosit automată pe înălțime, dar atunci nu vom avea o animație la deschiderea).