Akordeony CSS se široce používají pro rozbalitelná a sbalitelná menu, úryvky, obrázky, videa, často kladené dotazy, seznamy a úryvky článků. Můžete je snadno vytvořit pomocí HTML, CSS a JavaScriptu (nebo jQuery). Vytváření akordeonů pouze s CSS je trochu náročný úkol, ale je velmi užitečné v prostředích s vypnutým JavaScriptem.

V této příručce se naučíte krok za krokem vytvořit akordeon pouze v CSS.

Stavba základního akordeonu pouze pomocí HTML

Pokud je vaší prioritou vytvoření přístupného akordeonu pomocí HTML, a značky jsou cesta. Nezáleží na tom, jaký programovací jazyk používáte, akordeon pouze HTML zůstane nedotčen. Vytvořit označte jako rodič a zadejte otázku do a štítek. Do a. napište popisnou odpověď štítek. Opakujte proces pro libovolný počet častých dotazů.

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!






FAQ 2





instagram viewer




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!

Styling akordeonu

Harmonika můžete upravit úpravou barva pozadí, hraniční poloměr, okraj, vycpávka, atd.

tělo {
 font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Ženeva, Verdana, bezpatkové;
 max-šířka: 30rem;
 okraj: 1,5rem auto;
}
souhrn {
 váha písma: 600;
 barva: rgb (255, 255, 255);
 barva pozadí: rgb (7, 185, 255);
 polstrování: 1,2rem;
 okraj-dole: 1,2rem;
 border-radius: 0,5rem;
 kurzor: ukazatel;
}

Výstup:

Jediným omezením je, že nebudete mít kontrolu nad každou částí kódu. Strukturu HTML lze upravit, ale nemůžete vytvořit vlastní akordeon. Vytvořme si proto vlastní sekci FAQ pomocí pokročilého CSS.

Sestavte si vlastní sekci FAQ

Existují dvě oblíbené metody, jak vytvořit vlastní akordeon pouze v CSS. Můžete použít zaškrtávací políčka nebo přepínače; vysvětlíme si oba způsoby.

Pomocí metody zaškrtávacího políčka

Metoda zaškrtávacího políčka používá zaškrtávací políčko jako typ vstupu. Kdykoli uživatel vybere kartu, označí zaškrtávací políčko a otevře se. Pomocí metody zaškrtávacího políčka můžete otevřít více karet současně, podobně jako můžete označit více než jedno zaškrtávací políčko uvnitř HTML formulář.

HTML

Vlastní CSS pouze akordeon (FAQ)

Pomocí metody Checkbox






Jak postavit vlastní akordeon pouze pomocí CSS?


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









Jak změnit výšku pseudoprvků?


 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.

Obecné CSS

Použijte základní CSS na tělo.

tělo {
 barva: #502c2c;
 pozadí: #f1edec;
 polstrování: 1,2rem;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 max-šířka: 45rem;
 okraj: 0 auto;
 velikost písma: 1,2rem;
}

Styling akordeonu

Nejprve skryjte zaškrtávací políčka úpravou vstupu.

/* Skrytí zaškrtávacích políček nebo přepínače*/
vstup {
 pozice: absolutní;
 neprůhlednost: 0;
 z-index: -1;
}

Nyní upravte akordeon. Můžete přidat::po pseudo-prvek pro + podepsat. Můžete odkazovat na a Referenční tabulka znakových entit a použít jakýkoli Entity Conversion Calculator najít hodnotu CSS číselné hodnoty. Zde je hodnota CSS + je \002B.

/* Styly akordeonů */
.faq {
 barva: #ffe3e3;
 okraj-dole: 3rem;
}
.faq-label {
 velikost písma: 1,5rem;
 displej: flex;
 align-items: center;
 justify-content: mezera-mezi;
 polstrování: 1 em;
 pozadí: #b61818;
 váha písma: tučné;
 kurzor: ukazatel;
 user-select: none;
}
.faq-label:: po {
 obsah: '\002B';
 polstrování: 0,51rem;
 transformace: měřítko (1,8);
 text-align: center;
 přechod: vše 0,35s;
}
.faq-content {
 max-výška: 0;
 polstrování: 0 1em;
 barva: #2c3e50;
 pozadí: bílé;
 přechod: vše 0,35s;
 displej: žádný;
}

Nyní přidáme funkčnost akordeonu pomocí sousední a selektory atributů. Tady, \2013 je hodnota CSS pro –, která představuje číselnou hodnotu –.

vstup: zaškrtnuto + .faq-label {
 pozadí: #8f1414;
}
vstup: zaškrtnuto + .faq-label:: po {
 obsah: '\2013';
 transformace: měřítko (1,5);
}
vstup: zaškrtnuto ~ .faq-content {
 maximální výška: 100vh;
 polstrování: 1 em;
 displej: blok;
 přechod: vše 0,35s;
}

Výstup:

Použití metody přepínacího tlačítka

Metoda přepínacího tlačítka má nastaven typ vstupu na rádio. Kdykoli uživatel klikne na kartu, otevře se skrytý přepínač odpovídající této kartě. Když kliknete na další kartu, předchozí karta se okamžitě zavře. Pomocí metody přepínacího tlačítka můžete otevřít vždy pouze jednu kartu.

HTML

Vlastní CSS pouze akordeon (FAQ)

Pomocí metody přepínacího tlačítka






Jak vytvořit akordeon pomocí metody 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.









Jak vytvořit vlastní akordeon pouze pomocí 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.









Co znamená akordeonový styl?


 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? Vel, ne!









Zavřít vše ×

CSS

Zkopírujte výše uvedené CSS metody Checkbox, protože obě metody se liší pouze od strukturálního pohledu. Můžete si všimnout, že je neustále otevřena jedna karta. K tomu dochází, protože nemůžete zrušit označení přepínačů, jako jsou zaškrtávací políčka. Chcete-li toho dosáhnout, přidejte níže uvedený kód CSS do přepínače „Zavřít vše“ bez jakéhokoli popisu.

/* Zavírám vše */
.faq-label {
 poloha: relativní;
}
.faq-close {
 displej: inline-block;
 polstrování: 1rem;
 velikost písma: 1rem;
 pozadí: #b61818;
 kurzor: ukazatel;
 pozice: absolutní;
 vlevo: 64rem;
}

Výstup:

Pokračujte v experimentování a přidávejte animace

Za akordeony je jednoduchá logika: když kliknete na nabídku, objeví se její skrytý obsah. Protože nyní víte, jak vytvořit akordeon, je nejvyšší čas implementovat a experimentovat s vaším učením. Můžete postavit horizontální harmoniky pro vylepšení designu, zejména při zobrazování obrázků. Experimentujte s kódem úpravou přechodového efektu pomocí animací klíčových snímků.

Naincy Mouryaová (16 zveřejněných článků)

Naincy se specializuje na vytváření vysoce responzivních webových stránek a efektivní obsahové strategie spolu s webovými kopiemi. Je to nezávislá tech spisovatelka, která ostře sleduje trendy technologií.

Více od Naincy Mouryaové