Akordeony CSS są szeroko stosowane w rozwijanych i zwijanych menu, fragmentach, obrazach, filmach, często zadawanych pytaniach, listach i fragmentach artykułów. Możesz je łatwo tworzyć za pomocą HTML, CSS i JavaScript (lub jQuery). Tworzenie akordeonów tylko w CSS jest dość trudnym zadaniem, ale jest bardzo pomocne w środowiskach z wyłączonym JavaScriptem.

W tym przewodniku nauczysz się krok po kroku, jak tworzyć akordeon tylko w CSS.

Budowanie podstawowego akordeonu tylko przy użyciu HTML

Jeśli Twoim priorytetem jest stworzenie dostępnego akordeonu za pomocą HTML, oraz tagi są do zrobienia. Nie ma znaczenia, jakiego języka programowania używasz, akordeon tylko w języku HTML pozostanie nienaruszony. Stwórz oznacz jako rodzic i wpisz pytanie w a etykietka. Napisz opisową odpowiedź wewnątrz a etykietka. Powtórz proces dla dowolnej liczby często zadawanych pytań.

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 konsekwatur. 






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!

Stylizacja akordeonu

Możesz stylizować akordeon, dostosowując kolor tła, promień-granicy, margines, wyściółkaitp.

ciało {
 rodzina czcionek: „Lucida Sans”, „Lucida Sans Regular”, „Lucida Grande”, „Lucida Sans Unicode”, Genewa, Verdana, bezszeryfowy;
 maksymalna szerokość: 30rem;
 margines: 1,5 rem auto;
}
streszczenie {
 grubość czcionki: 600;
 kolor: rgb (255, 255, 255);
 kolor tła: rgb (7, 185, 255);
 wypełnienie: 1,2rem;
 margines-dolny: 1,2 rem;
 promień graniczny: 0.5rem;
 kursor: wskaźnik;
}

Wyjście:

Jedynym ograniczeniem jest to, że nie będziesz mieć kontroli nad każdą częścią kodu. Strukturę HTML można modyfikować, ale nie można tworzyć własnego akordeonu. Dlatego zbudujmy niestandardową sekcję FAQ przy użyciu zaawansowanego CSS.

Zbuduj swoją niestandardową sekcję FAQ

Istnieją dwie popularne metody tworzenia niestandardowego akordeonu tylko w CSS. Możesz użyć pól wyboru lub przycisków radiowych; wyjaśnimy obie metody.

Korzystanie z metody pola wyboru

Metoda pola wyboru używa pole wyboru jako typ wejścia. Za każdym razem, gdy użytkownik wybiera kartę, zaznacza pole wyboru i otwiera się. Możesz otworzyć wiele kart jednocześnie za pomocą metody pola wyboru, podobnie jak możesz zaznaczyć więcej niż jedno pole wyboru wewnątrz formularz HTML.

HTML

Tylko niestandardowy akordeon CSS (FAQ)

Korzystanie z metody Checkbox






Jak zbudować własny akordeon używając tylko CSS?


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









Jak zmienić wysokość pseudoelementów?


 Temporibus vel dolore nam dolorem similique voluptatum. Aliquam, żal i! Tempore mollitia voluptatibus
 ducimus wyjątek doloribus aliquam ipsum vel, accusantium quo nemo expedita esse eos libero incidunt
 reprehenderit facere ex hic ipsa odit in! Wieczór.

Ogólne CSS

Zastosuj podstawowy CSS do treści.

ciało {
 kolor: #502c2c;
 tło: #f1edec;
 wypełnienie: 1,2rem;
 rodzina czcionek: „Segoe UI”, Tahoma, Genewa, Verdana, bezszeryfowy;
 maksymalna szerokość: 45rem;
 margines: 0 auto;
 rozmiar czcionki: 1.2rem;
}

Stylizacja akordeonu

Najpierw ukryj pola wyboru, modyfikując dane wejściowe.

/* Ukrywanie pól wyboru lub przycisku opcji*/
Wejście {
 pozycja: bezwzględna;
 krycie: 0;
 indeks z: -1;
}

Teraz stylizuj akordeon. Możesz dodać ::po pseudoelement dla + znak. Możesz odwołać się do Tabela referencyjna jednostek znaków i użyj dowolnego Kalkulator konwersji jednostek aby znaleźć wartość CSS wartości liczbowej. Tutaj wartość CSS + jest \002B.

/* Style akordeonu */
.często {
 kolor: #ffe3e3;
 margines-dolny: 3rem;
}
.faq-etykieta {
 rozmiar czcionki: 1,5 rem;
 wyświetlacz: elastyczny;
 wyrównaj-elementy: środek;
 uzasadnienie-treść: spacja-między;
 wypełnienie: 1em;
 tło: #b61818;
 grubość czcionki: pogrubiona;
 kursor: wskaźnik;
 wybór użytkownika: brak;
}
.faq-label:: po {
 zawartość: '\002B';
 wypełnienie: 0,51rem;
 transformacja: skala (1.8);
 wyrównanie tekstu: środek;
 przejście: wszystkie 0,35s;
}
.faq-treść {
 maksymalna wysokość: 0;
 wypełnienie: 0 1em;
 kolor: #2c3e50;
 tło: białe;
 przejście: wszystkie 0,35s;
 Nie wyświetla się;
}

Teraz dodajmy funkcjonalność do akordeonu za pomocą selektory sąsiednich i atrybutów. Tutaj, \2013 jest wartością CSS dla –, wartość liczbowa reprezentująca –.

wejście: zaznaczone + .faq-label {
 tło: #8f1414;
}
dane wejściowe: zaznaczone + .faq-label:: po {
 zawartość: '\2013';
 transformacja: skala (1,5);
}
wejście: sprawdzone ~ .faq-treść {
 maksymalna wysokość: 100vh;
 wypełnienie: 1em;
 Blok wyświetlacza;
 przejście: wszystkie 0,35s;
}

Wyjście:

Korzystanie z metody przycisku radiowego

Metoda przycisku radiowego ma typ wejścia ustawiony na radio. Za każdym razem, gdy użytkownik kliknie kartę, zostanie otwarty ukryty przycisk radiowy odpowiadający tej karcie. Po kliknięciu następnej karty poprzednia karta natychmiast się zamyka. Możesz otworzyć tylko jedną kartę na raz, korzystając z metody przycisku radiowego.

HTML

Tylko niestandardowy akordeon CSS (FAQ)

Korzystanie z metody przycisku radiowego






Jak stworzyć akordeon metodą Radio Button?


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









Jak stworzyć własny akordeon używając tylko 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 oznacza styl akordeonu?


 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, nie!









Zamknij wszystko ×

CSS

Skopiuj powyższy kod CSS metody pola wyboru, ponieważ obie metody różnią się tylko ze strukturalnego punktu widzenia. Możesz zauważyć, że przez cały czas jest otwarta jedna karta. Dzieje się tak, ponieważ nie można odznaczyć przycisków opcji, takich jak pola wyboru. Aby to osiągnąć, dodaj poniższy kod CSS do przycisku opcji „Zamknij wszystko” bez żadnego opisu.

/* Zamykanie wszystkich */
.faq-etykieta {
 pozycja: względna;
}
. faq-zamknij {
 wyświetlacz: inline-block;
 wypełnienie: 1rem;
 rozmiar czcionki: 1rem;
 tło: #b61818;
 kursor: wskaźnik;
 pozycja: bezwzględna;
 po lewej: 64rem;
}

Wyjście:

Eksperymentuj i dodawaj animacje

Za akordeonami kryje się prosta logika: po kliknięciu menu pojawi się jego ukryta zawartość. Skoro już wiesz, jak stworzyć akordeon, nadszedł czas, aby wdrożyć i poeksperymentować z nauką. Możesz budować akordeony poziome, aby ulepszyć projekt, zwłaszcza podczas wyświetlania obrazów. Eksperymentuj z kodem, dostosowując efekt przejścia za pomocą animacji klatek kluczowych.

Naincy Mourya (16 opublikowanych artykułów)

Naincy specjalizuje się w budowaniu wysoce responsywnych stron internetowych oraz efektywnej strategii treści wraz z kopiami internetowymi. Jest niezależną pisarką o technologiach, która bacznie obserwuje trendy w technologiach.

Więcej od Naincy Mouryi