Acordeoanele CSS sunt utilizate pe scară largă pentru meniuri, fragmente, imagini, videoclipuri, întrebări frecvente, liste și fragmente de articole extensibile și pliabile. Le puteți crea cu ușurință folosind HTML, CSS și JavaScript (sau jQuery). Crearea acordeoanelor numai CSS este o sarcină destul de dificilă, dar este foarte utilă în mediile cu JavaScript dezactivat.

În acest ghid, veți învăța o abordare pas cu pas pentru crearea unui acordeon numai CSS.

Construirea acordeonului de bază folosind numai HTML

Dacă prioritatea dvs. este crearea unui acordeon accesibil folosind HTML, și etichetele sunt calea de urmat. Nu va conta ce limbaj de programare utilizați, acordeonul numai HTML va rămâne intact. Creeaza o etichetați ca părinte și introduceți întrebarea în a etichetă. Scrieți un răspuns descriptiv în interiorul a etichetă. Repetați procesul pentru orice număr de întrebări frecvente.

Întrebări frecvente 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







Întrebări frecvente 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. 






Întrebări frecvente 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!

Stilizarea acordeonului

Puteți modela acordeonul ajustând culoare de fundal, hotar-raza, marginea, căptușeală, etc.

corp {
 font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 latime maxima: 30rem;
 marja: 1.5rem auto;
}
rezumat {
 greutate font: 600;
 culoare: rgb (255, 255, 255);
 culoare de fundal: rgb (7, 185, 255);
 umplutură: 1,2 rem;
 margine-jos: 1.2rem;
 raza-limită: 0,5rem;
 cursor: pointer;
}

Ieșire:

Singura limitare este că nu veți avea control asupra fiecărei părți a codului. Structura HTML poate fi modificată, dar nu puteți crea un acordeon personalizat. Prin urmare, să construim o secțiune personalizată de întrebări frecvente folosind CSS avansat.

Creați-vă secțiunea personalizată de întrebări frecvente

Există două metode populare pentru a crea un acordeon personalizat numai pentru CSS. Puteți utiliza fie casete de selectare, fie butoane radio; vom explica ambele metode.

Folosind metoda casetei de selectare

Metoda casetei de selectare folosește Caseta de bifat ca tip de intrare. Ori de câte ori un utilizator selectează o filă, marchează caseta de selectare și se deschide. Puteți deschide mai multe file simultan utilizând metoda casetei de selectare, similar modului în care puteți bifa mai multe casete de selectare într-o formular HTML.

HTML

Acordeon personalizat numai CSS (Întrebări frecvente)

Folosind metoda Checkbox






Cum să construiți un acordeon personalizat folosind numai CSS?


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









Cum se schimbă înălțimea pseudo-elementelor?


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

CSS general

Aplicați CSS-ul de bază pe corp.

corp {
 culoare: #502c2c;
 fundal: #f1edec;
 umplutură: 1,2 rem;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 latime maxima: 45rem;
 marja: 0 auto;
 dimensiunea fontului: 1.2rem;
}

Stilizarea acordeonului

Mai întâi, ascundeți casetele de selectare modificând intrarea.

/* Ascunderea casetelor de selectare sau a butonului radio*/
intrare {
 poziție: absolută;
 opacitate: 0;
 indicele z: -1;
}

Acum, stilizează acordeonul. Puteți adăuga un::după pseudo-element pentru + semn. Vă puteți referi la a Diagrama de referință a entităților de caracter și folosiți oricare Calculator de conversie a entității pentru a găsi valoarea CSS a unei valori numerice. Aici, valoarea CSS a + este \002B.

/* Stiluri de acordeon */
.FAQ {
 culoare: #ffe3e3;
 margine-jos: 3rem;
}
.faq-label {
 dimensiunea fontului: 1.5rem;
 display: flex;
 alinierea elementelor: centru;
 justificare-conținut: spațiu-între;
 umplutura: 1em;
 fundal: #b61818;
 greutatea fontului: bold;
 cursor: pointer;
 user-select: niciunul;
}
.faq-label:: după {
 conținut: „\002B”;
 umplutură: 0,51 rem;
 transforma: scară (1,8);
 text-align: centru;
 tranziție: toate 0,35s;
}
.faq-content {
 înălțime maximă: 0;
 umplutură: 0 1em;
 culoare: #2c3e50;
 fundal: alb;
 tranziție: toate 0,35s;
 afișaj: niciunul;
}

Acum, să adăugăm funcționalitate utilizării acordeonului selectoare adiacente și de atribute. Aici, \2013 este valoarea CSS pentru –, Valoarea numerică reprezentând –.

intrare: bifat + .faq-label {
 fundal: #8f1414;
}
intrare: bifat + .faq-label:: după {
 conținut: „\2013”;
 transforma: scară (1,5);
}
intrare: verificat ~ .faq-content {
 inaltime maxima: 100vh;
 umplutura: 1em;
 afisare: bloc;
 tranziție: toate 0,35s;
}

Ieșire:

Folosind metoda butonului radio

Metoda butonului radio are un tip de intrare setat la radio. Ori de câte ori utilizatorul face clic pe o filă, se deschide butonul radio ascuns corespunzător acelei file. Când faceți clic pe fila următoare, fila anterioară se închide instantaneu. Puteți deschide o singură filă la un moment dat folosind metoda butonului radio.

HTML

Acordeon personalizat numai CSS (Întrebări frecvente)

Folosind metoda butonului radio






Cum se creează acordeon folosind metoda Radio Button?


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









Cum se creează un acordeon personalizat folosind numai 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.









Ce înseamnă stilul acordeonului?


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









Închideți toate ×

CSS

Copiați CSS-ul de mai sus al metodei casetei de selectare, deoarece ambele metode diferă doar din punct de vedere structural. Este posibil să observați că există o filă deschisă tot timpul. Acest lucru se întâmplă deoarece nu puteți demarca butoanele radio, cum ar fi casetele de selectare. Pentru a realiza acest lucru, adăugați codul CSS de mai jos la un buton radio „Închide tot” fără nicio descriere.

/* Închiderea tuturor */
.faq-label {
 poziție: relativă;
}
.faq-close {
 display: inline-block;
 captuseala: 1rem;
 dimensiunea fontului: 1rem;
 fundal: #b61818;
 cursor: pointer;
 poziție: absolută;
 stânga: 64rem;
}

Ieșire:

Continuați să experimentați și adăugați animații

Există o logică simplă în spatele acordeonurilor: când dați clic pe un meniu, va apărea conținutul ascuns al acestuia. Deoarece acum știi cum să creezi un acordeon, este timpul să implementezi și să experimentezi învățarea ta. Puteți construi acordeoane orizontale pentru a îmbunătăți designul, mai ales când afișați imagini. Experimentați cu codul ajustând efectul de tranziție folosind animații de cadre cheie.

Naincy Mourya (16 articole publicate)

Naincy este specializată în construirea de site-uri web foarte receptive și strategie de conținut eficientă, împreună cu copii web. Ea este o scriitoare de tehnologie independentă care urmărește cu atenție tehnologiile în tendințe.

Mai multe de la Naincy Mourya