Hogyan készítsünk egy harmonika a CSS3, szabad-site-mester

Egy tipikus harmonika, de rájött, csak CSS3 tulajdonságait.

Vannak különböző változatai harmonika épült csak CSS. de ezek általában használt, egy pszeudo osztály: cél. amelynek hátránya van, így lehetetlen lezárása után a nyilvánosságra hozatal tartalma és egyidejű megnyitása több rejtett elemeket.

De a segítségével rejtett négyzeteket (flags) tudjuk irányítani a nyitó és záró. És annak érdekében, hogy csak az egyik elemet a harmonika használt rádió gombok indult ugyanabban az időben.

HTML-kód

Tekintsük a példát, amely négyzeteket (zászlók), és ha az egyik része a tartalom nyitott alapértelmezés szerint (input kell lennie «ellenőrizni» (jelölt).

Minden kerül egy tartályban ac-tároló osztály. Minden egyes elem, akkor négyzetet. címke és a cikk tartalmát.

Vegye figyelembe, hogy minden egyes bemeneti, meg kell rendelni az azonosító, amely használható a attribútumot. Meg kell jelölnie a jelölőnégyzetet kattintva a címkén.

Minden cikk egy osztály, amely segít meghatározni a magasságot, amelyen a tétel nyitja meg a harmonika. (Optimális esetben minden bizonnyal használható automatikus magasság, de akkor nem lesz animáció megnyitásakor).