V tomto blogu se chystám vytvořit akordeon pomocí nativního Javascriptu. Není zapotřebí žádná knihovna jako jQuery. JQueryUI má vestavěnou komponentu akordeon, kterou lze skvěle použít. Ale jako zodpovědní vývojáři bychom měli také vědět, jak ji vytvořit pomocí čistého javascriptu. Pokud nevíte, co je to akordeon, podívejte se na jQuery zde.
Rozložíme si komponentu na menší kroky.
- Akordion obsahuje seznam panelů.
- Každý panel má dvě komponenty, záhlaví & tělo.
- Komponenta záhlaví všech panelů je vždy viditelná.
- Panel lze rozbalit nebo sbalit.
- Pokud je panel rozbalen, zviditelní se jeho komponenta tělo.
- Vždy lze rozbalit pouze jeden panel.
- Pokud je rozbalen jiný panel, skryje se komponenta těla posledního panelu.
Sestavme komponentu po malých krocích.
Vytvořme základní html, které vytvoří seznam panelů se záhlavím & tělem.
Výše uvedené html obsahuje seznam panelů. Každý panel má položku header a body. V současné době je vše viditelné.
Krok2 :- Definujme nějaké CSS pro ošetření viditelnosti
Vytvořme dvě třídy CSS, které budou definovat viditelnost těla.
Ve výchozím nastavení chceme skrýt všechna těla panelu podle požadavku. Nyní potřebujeme zobrazit pouze rozšířený prvek najednou. Přidáme třídu active do divu panelu, aby bylo tělo viditelné.
Krok3 :- Použití CSS v HTML
Po přidání CSS do našeho HTML bude kód vypadat takto
Nyní je skryté celé tělo panelu kromě prvního. Vytvořili jsme naši základní komponentu akordeon. Abychom ji plně zprovoznili, musíme použít nějaký javascript.
Krok4 :- Přidání událostí kliknutí
Na každý panel přidáme událost kliknutí, která změní viditelnost panelu.
JS Fiddle odkaz zde
initAccordion je definována funkce pro inicializaci komponenty akordeon. Na každý panel umístí událost kliknutí. Po kliknutí na panel odstraní aktivní třídu z aktuálního aktivního panelu a přidá ji do nového panelu. Ve výchozím nastavení je aktivní první panel. Ve výchozím nastavení můžeme učinit aktivním libovolný panel předáním prvku panel funkci showPanel.
Úspěšně jsme vytvořili náš akordeon. Je to jen velmi základní model akordeonu, ale pokrývá hlavní funkčnost.
Můžeme jej ozvláštnit přidáním pěkných stylů css, animací a ikon. Také ho můžeme udělat výkonnější implementací delegace událostí & do mezipaměti aktuálních aktivních prvků. Podrobněji se o událostech dozvíte v mém blogu o událostech.