CSS-accordeons worden veel gebruikt voor uitvouwbare en inklapbare menu's, fragmenten, afbeeldingen, video's, veelgestelde vragen, lijsten en artikelfragmenten. U kunt ze eenvoudig maken met HTML, CSS en JavaScript (of jQuery). Het maken van alleen CSS-accordeons is een beetje een uitdagende taak, maar het is super handig in omgevingen met JavaScript-uitgeschakelde.
In deze handleiding leert u een stapsgewijze benadering voor het maken van een accordeon met alleen CSS.
Basisaccordeon bouwen met alleen HTML
Als uw prioriteit het maken van een toegankelijke accordeon met HTML is, en tags zijn de juiste keuze. Het maakt niet uit welke programmeertaal je gebruikt, de accordeon met alleen HTML blijft intact. Maak een tag als ouder en voer de vraag in a label. Schrijf een beschrijvend antwoord in a label. Herhaal het proces voor een willekeurig aantal veelgestelde vragen.
Veelgestelde vragen 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!
Veelgestelde vragen 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 gevolg.
Veelgestelde vragen 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 bij eligendi hic reprehenderit repellendus quos!
De accordeon stylen
U kunt de accordeon stylen door de Achtergrond kleur, grens-radius, marge, opvulling, enzovoort.
lichaam {
font-familie:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Genève, Verdana, schreefloos;
maximale breedte: 30rem;
marge: 1.5rem automatisch;
}
samenvatting {
lettergewicht: 600;
kleur: rgb (255, 255, 255);
achtergrondkleur: rgb (7, 185, 255);
opvulling: 1.2rem;
marge-onder: 1.2rem;
grensradius: 0,5rem;
cursor: aanwijzer;
}
Uitgang:
De enige beperking is dat je geen controle hebt over elk onderdeel van de code. De HTML-structuur kan worden gewijzigd, maar u kunt geen aangepaste accordeon maken. Laten we daarom een aangepaste sectie met veelgestelde vragen maken met behulp van geavanceerde CSS.
Bouw uw aangepaste sectie met veelgestelde vragen
Er zijn twee populaire methoden om een aangepaste accordeon met alleen CSS te maken. U kunt selectievakjes of keuzerondjes gebruiken; we zullen beide methoden uitleggen.
De Checkbox-methode gebruiken
De Checkbox-methode gebruikt selectievakje als het invoertype. Telkens wanneer een gebruiker een tabblad selecteert, markeren ze het selectievakje en wordt het geopend. U kunt meerdere tabbladen tegelijkertijd openen met behulp van de Checkbox-methode, vergelijkbaar met hoe u meer dan één selectievakje binnen een kunt markeren HTML-formulier.
HTML
Aangepaste accordeon alleen CSS (FAQ)
De Checkbox-methode gebruiken
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum debitis voluptas aliquid tenetur quas suscipit
veronderstelnda a, nesciunt eum nobis eaque, exercitationem differentio alias ullam quia. Corrupti beatae
necessitatibus nihil.
Temporibus vel dolore nam dolorem similique voluptatum. Aliquam, dolor et! Tempore mollitia voluptatibus
ducimus Excepturi doloribus aliquam ipsum vel, accusantium quo nemo expedita esse eos libero incidunt
reprehenderit facere ex hic ipsa odit in! Eveniet.
Algemene CSS
Pas de basis-CSS toe op de body.
lichaam {
kleur: #502c2c;
achtergrond: #f1edec;
opvulling: 1.2rem;
font-familie: 'Segoe UI', Tahoma, Genève, Verdana, schreefloos;
maximale breedte: 45rem;
marge: 0 automatisch;
lettergrootte: 1.2rem;
}
De accordeon stylen
Verberg eerst de selectievakjes door de invoer te wijzigen.
/* De selectievakjes of keuzerondjes verbergen*/
invoer {
positie: absoluut;
dekking: 0;
z-index: -1;
}
Style nu de accordeon. U kunt een toevoegen::na pseudo-element voor de + teken. U kunt verwijzen naar een Referentietabel karakterentiteit en gebruik een Entiteit Conversie Calculator om de CSS-waarde van een numerieke waarde te vinden. Hier, de CSS-waarde van + is \002B.
/* Accordeonstijlen */.FAQ {
kleur: #ffe3e3;
marge-onder: 3rem;
}.faq-label {
lettergrootte: 1.5rem;
weergave: flexibel;
align-items: midden;
rechtvaardigen-inhoud: spatie-tussen;
vulling: 1em;
achtergrond: #b61818;
lettergewicht: vet;
cursor: aanwijzer;
gebruiker selecteren: geen;
}.faq-label:: na {
inhoud: '\002B';
vulling: 0,51rem;
transformeren: schaal (1.8);
tekst uitlijnen: midden;
overgang: alle 0.35s;
}
.faq-inhoud {
max-hoogte: 0;
opvulling: 0 1em;
kleur: #2c3e50;
achtergrond: wit;
overgang: alle 0.35s;
Geen weergeven;
}
Laten we nu functionaliteit aan de accordeon toevoegen met behulp van aangrenzende en attribuutselectors. Hier, \2013 is CSS-waarde voor –, de numerieke waarde die staat voor –.
invoer: aangevinkt + .faq-label {
achtergrond: #8f1414;
}
invoer: aangevinkt + .faq-label:: na {
inhoud: '\2013';
transformeren: schaal (1.5);
}
invoer: gecontroleerd ~ .faq-content {
max-hoogte: 100vh;
vulling: 1em;
weergave: blok;
overgang: alle 0.35s;
}
Uitgang:
De methode met keuzerondjes gebruiken
De Radio Button Method heeft een invoertype ingesteld op: radio-. Telkens wanneer de gebruiker op een tabblad klikt, wordt het verborgen keuzerondje dat overeenkomt met dat tabblad geopend. Wanneer u op het volgende tabblad klikt, wordt het vorige tabblad onmiddellijk gesloten. U kunt slechts één tabblad tegelijk openen met behulp van de Radio Button-methode.
HTML
Aangepaste accordeon alleen CSS (FAQ)
De Radio Button-methode gebruiken
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.
Aperiam dolores autem odit, nihil eius sit minima quas laudantium aspernatur posimus reiciendis vitae ducimus labore quidem velit vel temporibus! Illo sunt placeat officiis, tiure magnam. Ad sit perferendis ducimus dicta, est aspernatur asperores, quasi beatae quos deleniti.
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, niet!
CSS
Kopieer de bovenstaande CSS van de Checkbox-methode, aangezien beide methoden alleen vanuit structureel oogpunt verschillen. Het is u misschien opgevallen dat er altijd één tabblad is geopend. Dit gebeurt omdat u de markering van keuzerondjes zoals selectievakjes niet kunt opheffen. Om dit te bereiken, voegt u de onderstaande CSS-code toe aan een keuzerondje "Alles sluiten" zonder enige beschrijving.
/* Alles sluiten */
.faq-label {
positie: relatief;
}
.faq-sluiten {
weergave: inline-blok;
vulling: 1rem;
lettergrootte: 1rem;
achtergrond: #b61818;
cursor: aanwijzer;
positie: absoluut;
links: 64rem;
}
Uitgang:
Blijf experimenteren en voeg animaties toe
Er zit een eenvoudige logica achter accordeons: wanneer u op een menu klikt, verschijnt de verborgen inhoud ervan. Omdat je nu weet hoe je een accordeon moet maken, is het de hoogste tijd om je leerproces te implementeren en ermee te experimenteren. U kunt horizontale accordeons bouwen om het ontwerp te verbeteren, vooral bij het weergeven van afbeeldingen. Experimenteer met de code door het overgangseffect aan te passen met keyframe-animaties.
Wilt u uw code tot leven brengen met CSS keyframe-animaties? Hier is hoe het te doen.
Lees volgende
- Programmeren
- HTML
- CSS
- Webontwikkeling
- Webdesign
Naincy is gespecialiseerd in het bouwen van zeer responsieve websites en een efficiënte inhoudsstrategie, samen met webkopieën. Ze is een freelance tech-schrijver die trending technologieën scherp in de gaten houdt.
Abonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren
