Akordeóny CSS sa široko používajú pre rozbaliteľné a zbaliteľné ponuky, úryvky, obrázky, videá, často kladené otázky, zoznamy a úryvky článkov. Môžete ich ľahko vytvoriť pomocou HTML, CSS a JavaScriptu (alebo jQuery). Vytváranie akordeónov iba v CSS je trochu náročná úloha, ale je veľmi užitočná v prostrediach s vypnutým JavaScriptom.

V tejto príručke sa naučíte krok za krokom pri vytváraní akordeónu iba v CSS.

Vytvorenie základného akordeónu iba pomocou HTML

Ak je vašou prioritou vytvorenie prístupného akordeónu pomocou HTML, a značky sú správna cesta. Nezáleží na tom, ktorý programovací jazyk používate, akordeón iba v HTML zostane nedotknutý. Vytvor označte ako rodič a zadajte otázku do a tag. Napíšte popisnú odpoveď do a tag. Opakujte proces pre ľubovoľný počet častých otázok.

FAQ 1



Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione adipisci illum error, hic expedita numquam impedit explicabo vitae iure quae vero autem quia quibusdam tempora atque harum perferendis praesentium dolor!









instagram viewer



FAQ 2



Consequuntur earum pariatur dolorem repellat temporibus ducimus sunt suscipit repudiandae cupiditate in accusantium recusandae tempora sint eligendi, perferendis aspernatur architecto voluptas laborum adipisci neque voluptates consequatur. 






FAQ 3



Tenetur, ex delectus, perferendis aperiam voluptatem consequuntur molestiae ratione rerum vitae ab modi, minus placeat quis dignissimos. Dolorem quaerat odit, iusto laboriosam possimus, in architecto aliquam commodi sapiente saepe sequi at eligendi hic reprehenderit repellendus quos!

Úprava akordeónu

Akordeón si môžete upraviť úpravou farba pozadia, hraničný polomer, marža, vypchávka, atď.

telo {
 font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Ženeva, Verdana, bezpätkové;
 max-šírka: 30rem;
 marža: 1,5rem auto;
}
súhrn {
 váha písma: 600;
 farba: rgb (255, 255, 255);
 farba pozadia: rgb (7, 185, 255);
 polstrovanie: 1,2rem;
 okraj-dole: 1,2rem;
 hraničný rádius: 0,5rem;
 kurzor: ukazovateľ;
}

Výkon:

Jediným obmedzením je, že nebudete mať kontrolu nad každou časťou kódu. Štruktúru HTML je možné upraviť, ale nemôžete vytvoriť vlastný akordeón. Preto si vytvorte vlastnú sekciu FAQ pomocou pokročilých CSS.

Vytvorte si vlastnú sekciu FAQ

Existujú dva populárne spôsoby vytvorenia vlastného akordeónu iba v CSS. Môžete použiť začiarkavacie políčka alebo prepínače; vysvetlíme si oba spôsoby.

Použitie metódy začiarkavacieho políčka

Metóda začiarkavacieho políčka používa začiarkavacie políčko ako typ vstupu. Vždy, keď používateľ vyberie kartu, označí začiarkavacie políčko a otvorí sa. Pomocou metódy začiarkavacieho políčka môžete súčasne otvoriť viacero kariet, podobne ako môžete označiť viac ako jedno začiarkavacie políčko vo vnútri HTML formulár.

HTML

Custom CSS Only Accordion (FAQ)

Pomocou metódy začiarkavacieho políčka






Ako vytvoriť vlastný akordeón iba pomocou CSS?


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum debitis voluptas aliquid tenetur quas suscipit
 takenda a, nesciunt eum nobis eaque, exercitationem Differentio alias ullam quia. Corrupti beatae
 necessitatibus nihil.









Ako zmeniť výšku pseudoprvkov?


 Temporibus vel dolore nam dolorem similique voluptatum. Aliquam, dolor et! Tempore mollitia voluptatibus
 ducimus exclusiveuri doloribus aliquam ipsum vel, accusantium quo nemo expedita esse eos libero incidunt
 reprehenderit facere ex hic ipsa odit in! Eveniet.

Všeobecné CSS

Aplikujte základné CSS na telo.

telo {
 farba: #502c2c;
 pozadie: #f1edec;
 polstrovanie: 1,2rem;
 rodina fontov: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 max-šírka: 45rem;
 okraj: 0 auto;
 veľkosť písma: 1,2rem;
}

Úprava akordeónu

Najprv skryte začiarkavacie políčka úpravou vstupu.

/* Skrytie začiarkavacích políčok alebo prepínača*/
vstup {
 pozícia: absolútna;
 nepriehľadnosť: 0;
 z-index: -1;
}

Teraz upravte akordeón. Môžete pridať::po pseudoprvok pre + znamenie. Môžete sa odvolať na a Referenčná tabuľka znakovej entity a použiť akékoľvek Kalkulačka konverzie entít nájsť hodnotu CSS číselnej hodnoty. Tu je hodnota CSS + je \002B.

/* Štýly akordeónu */
.faq {
 farba: #ffe3e3;
 okraj-dole: 3rem;
}
.faq-label {
 veľkosť písma: 1,5rem;
 displej: flex;
 align-items: center;
 justify-content: medzera-medzi;
 výplň: 1 em;
 pozadie: #b61818;
 váha písma: tučné;
 kurzor: ukazovateľ;
 user-select: none;
}
.faq-label:: po {
 obsah: '\002B';
 polstrovanie: 0,51rem;
 transformácia: mierka (1,8);
 text-align: center;
 prechod: všetko 0,35s;
}
.faq-content {
 maximálna výška: 0;
 výplň: 0 1em;
 farba: #2c3e50;
 pozadie: biele;
 prechod: všetko 0,35s;
 displej: žiadny;
}

Teraz pridajte funkčnosť akordeónu pomocou susedné a selektory atribútov. Tu, \2013 je hodnota CSS pre –, ktorá predstavuje číselnú hodnotu –.

vstup: začiarknuté + .faq-label {
 pozadie: #8f1414;
}
vstup: začiarknuté + .faq-label:: po {
 obsah: '\2013';
 transformácia: mierka (1,5);
}
vstup: začiarknutý ~ .faq-content {
 maximálna výška: 100vh;
 výplň: 1 em;
 displej: blok;
 prechod: všetko 0,35s;
}

Výkon:

Použitie metódy prepínača

Metóda rádiového tlačidla má nastavený typ vstupu na rádio. Vždy, keď používateľ klikne na kartu, otvorí sa skrytý prepínač zodpovedajúci danej karte. Keď kliknete na ďalšiu kartu, predchádzajúca karta sa okamžite zatvorí. Pomocou metódy prepínača môžete naraz otvoriť iba jednu kartu.

HTML

Custom CSS Only Accordion (FAQ)

Použitie metódy rádiového tlačidla






Ako vytvoriť akordeón pomocou metódy Radio Button?


 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus maiores quisquam atque dicta eum numquam necessitatibus, nisi non adipisci temporibus broken libero hic aspernatur quibusdam dolores perferendis, officiis odio repellendus.









Ako vytvoriť vlastný akordeón iba pomocou CSS?


 Aperiam dolores autem odit, nihil eius sit minima quas laudantium aspernatur possimus reiciendis vitae ducimus labore quidem velit vel temporibus! Illo sunt placeat officiis, tiure magnam. Ad sit perferendis ducimus dicta, est aspernatur asperiores, quasi beatae quos deleniti.









Čo znamená akordeónový štýl?


 Laudantium quibusdam laboriosam hic omnis quas ullam commodi rem. Architecto ut laborum eaque cum porro doloremque hic cupiditate tempora temporibus ducimus dolores magnam quidem, facilis sapiente officiis voluptas? Dobre, nie!









Zavrieť všetky ×

CSS

Skopírujte vyššie uvedený CSS metódy začiarkavacieho políčka, pretože obe metódy sa líšia iba od štrukturálneho hľadiska. Môžete si všimnúť, že stále je otvorená jedna karta. Stáva sa to preto, že nemôžete zrušiť označenie prepínačov, ako sú začiarkavacie políčka. Aby ste to dosiahli, pridajte nižšie uvedený kód CSS do prepínača „Zavrieť všetko“ bez akéhokoľvek popisu.

/* Zatvára sa všetko */
.faq-label {
 poloha: relatívna;
}
.faq-close {
 displej: inline-block;
 vypchávka: 1rem;
 veľkosť písma: 1rem;
 pozadie: #b61818;
 kurzor: ukazovateľ;
 pozícia: absolútna;
 vľavo: 64rem;
}

Výkon:

Pokračujte v experimentovaní a pridávajte animácie

Za akordeónmi je jednoduchá logika: keď kliknete na ponuku, zobrazí sa jej skrytý obsah. Keďže teraz viete, ako vytvoriť akordeón, je najvyšší čas implementovať a experimentovať s učením. Môžete postaviť horizontálne akordeóny na zlepšenie dizajnu, najmä pri zobrazovaní obrázkov. Experimentujte s kódom úpravou efektu prechodu pomocou animácií kľúčových snímok.

Naincy Mouryaová (16 publikovaných článkov)

Naincy sa špecializuje na vytváranie vysoko responzívnych webových stránok a efektívnu obsahovú stratégiu spolu s webovými kópiami. Je technologickou spisovateľkou na voľnej nohe, ktorá pozorne sleduje trendy technológií.

Viac od Naincy Mouryaovej