Zabudnite na JavaScript, je tu CSS3: Accordion

CSS3 dáva kóderom moc, ktorú doteraz nemali. Tak prečo si ju neskúsiť podmaniť? V tomto návode si ukážeme, ako s použitým pseudo class v css vyrobiť accordion bez javascriptu.

Za seba môžem povedať, že JavaScriptu rozumiem, dokážem si ho napísať, pripraviť jQuery plugin, prípadne nejaký predpripravený priohnúť cez koleno, ale stále mám pocit, že by môj kód mohol byť kratší, efektívnejší, dynamickejší proste viac sexy. Kým toto nastane, skúšam kam až mi dovolí zájsť moja znalosť css a html… a možnosti sa zatiaľ zdajú byť obrovské. Preto som sa rozhodla svoje pokusy zdokumentovať a podeliť sa.

Výsledky návodu

Tento návod funguje len v prehliadačoch, ktoré plne podporuju CSS3 pseudo classy!

A ideme!

Pri skúmaní možností pseudo class mi ostali dvaja víťazi: :target a :checked. :target sa mne osobne nepáči, pretože ma obmedzuje v počte otvorených zložiek, preto padla voľba na :checked. Konkrétny návod je s využitím checkboxov (je možné použiť aj radiobuttony v prípade, že chceme docieliť otvorenie len jednej záložky).

HTML kód

Celý accordion je obalený kontajnerom s classou accordion. Jednotlivá zložka sa skladá z inputu, labelu a divu s obsahom zložky.

Veľmi podstatné je spojiť každý input s dotyčnou label. Inputy maju id a label zase for.

<div class="accordion">
	<div>
		<input id="accordion-1" name="accordion-1" type="checkbox">
		<label class="accordion-1" for="accordion-1">Accordion č. 1</label>
		<div class="accordion-content">
			<p>Obsah</p>
		</div>
	</div>
	...
	<div>
		<input id="accordion-5" name="accordion-5" type="checkbox">
		<label class="accordion-5" for="accordion-5">Accordion č. 5</label>
		<div class="accordion-content">
			<p>Obsah</p>
		</div>
	</div>
</div>

CSS

Fantázií sa medze nekladú, accordion si môžete nastylovať ako uznáte za vhodné. Jeden z možných príkladov nájdete vo funkčnom deme. Vypichnem len najdôležitejšie veci, bez ktorých by sa accordion nechoval tak, ako ma.

  • Label je blokový element a ma nastavenú šírku, aby ladila s kontentom. Position: relative je u nej nastavená kvôli :before ikonkám.
  • Input samozrejme nezobrazujeme, pretože ho v designe nepotrebujeme.
  • Kontent accordionu má nastavenú nulovú výšku v defaultnom stave a overflow: hidden, aby nám text nepretekal mimo zónu. Vlastnosť transition vykresluje pekné otváranie a zatváranie zložky, ale iba v prípade, že si pevne zvolíte výšku elementu.
.accordion label {
	display: block;
	position: relative;
	width: 100%;
}
.accordion input { 
	display: none; 
}
.accordion .accordion-content {
	height: 0;
	overflow: hidden;
	transition: height 0.2s ease-in-out 0s;
	-webkit-transition: height 0.2s ease-in-out 0s;
    	-moz-transition: height 0.2s ease-in-out 0s;
    	-o-transition: height 0.2s ease-in-out 0s;
    	-ms-transition: height 0.2s ease-in-out 0s;
}
.accordion input:checked ~ .accordion-content {
	height: auto;
	transition: height 0.2s ease-in-out 0s;
	-webkit-transition: height 0.2s ease-in-out 0s;
    	-moz-transition: height 0.2s ease-in-out 0s;
    	-o-transition: height 0.2s ease-in-out 0s;
    	-ms-transition: height 0.2s ease-in-out 0s;	
}

A je to a vôbec to až tak nebolelo. K dispozícií je jednak funkčné vyšperkované demo, kde na prvej zložke je nastavená výška, ale aj zdrojový kód.

Článek obsahuje 5 komentářů

  • DSv

    1
    Pár postřehů:

    - name atribut inputu je zbytečný, až nežádoucí, bude-li "accordion" uvnitř formuláře
    - chtělo by to vyřešit nemožnost labelů získat focus pomocí klávesnice (tab), přinejmenším jedno (no-js) řešení mě napadá
    - neprefixované css properties (transition) se zapisují až nakonec
    - -ms-, -moz- a -o- prefixy nejsou třeba, viz http://caniuse.com/#feat=css-transitions
    - v css je blok s identickým transition zbytečně dvakrát
    - pokud chceš nějaký efekt bez známé výšky, můžeš místo height použít třeba opacity
    - bylo by fajn mít nějaký rozumný fallback - aspoň takový, aby se v prohlížečích bez podpory patřičných selectorů skrytý obsah vždy zobrazil

    Ale jinak zajímavý nápad, pár věcí jsem už podobným způsobem taky dal dokupy, někdy o tom napíšu :-).
  • DSv

    2
    Ehm, bylo by fajn, kdyby v komentářích fungovaly nové řádky, pak by to i dávalo smysl :-)
  • Jana

    3
    Nove riadky uz funguji ;)
  • Pavol

    4
    lorem ipsum dolor sit amet
  • Pavol

    5
    lorem ipsum