CSS harmonikaer bruges i vid udstrækning til menuer, der kan udvides og sammenklappes, uddrag, billeder, videoer, ofte stillede spørgsmål, lister og artikeluddrag. Du kan nemt oprette dem ved hjælp af HTML, CSS og JavaScript (eller jQuery). At lave harmonikaer, der kun er CSS, er lidt af en udfordrende opgave, men det er super nyttigt i JavaScript-deaktiverede miljøer.

I denne vejledning lærer du en trin-for-trin tilgang til at skabe en harmonika, der kun er CSS.

Bygning af grundlæggende harmonika kun ved hjælp af HTML

Hvis din prioritet er at skabe en tilgængelig harmonika ved hjælp af HTML, og tags er vejen at gå. Det er ligegyldigt, hvilket programmeringssprog du bruger, harmonikaen, der kun er til HTML, forbliver intakt. Lave en tag som forælder og indtast spørgsmålet i en tag. Skriv et beskrivende svar inde i a tag. Gentag processen for et vilkårligt antal ofte stillede spørgsmål.

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






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 af harmonika

Du kan style harmonikaen ved at justere baggrundsfarve, grænse-radius, margen, polstring, etc.

krop {
 font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneve, Verdana, sans-serif;
 max-bredde: 30rem;
 margen: 1,5rem auto;
}
Resumé {
 skrifttype-vægt: 600;
 farve: rgb (255, 255, 255);
 baggrundsfarve: rgb (7, 185, 255);
 polstring: 1,2rem;
 margin-bund: 1,2rem;
 grænse-radius: 0,5rem;
 markør: pointer;
}

Produktion:

Den eneste begrænsning er, at du ikke har kontrol over hver eneste del af koden. HTML-strukturen kan ændres, men du kan ikke oprette en tilpasset harmonika. Lad os derfor bygge en brugerdefineret FAQ-sektion ved hjælp af avanceret CSS.

Byg din brugerdefinerede FAQ-sektion

Der er to populære metoder til at skabe en tilpasset CSS-kun harmonika. Du kan enten bruge afkrydsningsfelter eller alternativknapper; vi vil forklare begge metoder.

Brug af afkrydsningsfeltmetoden

Afkrydsningsfeltmetoden bruger afkrydsningsfelt som inputtype. Når en bruger vælger en fane, markerer de afkrydsningsfeltet, og det åbnes. Du kan åbne flere faner samtidigt ved at bruge afkrydsningsfeltmetoden, på samme måde som du kan markere mere end ét afkrydsningsfelt i en HTML-formular.

HTML

Kun tilpasset CSS harmonika (Ofte stillede spørgsmål)

Brug af checkbox-metoden






Hvordan bygger man en tilpasset harmonika kun ved hjælp af 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.









Hvordan ændres højden af ​​pseudo-elementer?


 Temporibus eller dolore nam dolorem lignende 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.

Generel CSS

Anvend den grundlæggende CSS på kroppen.

krop {
 farve: #502c2c;
 baggrund: #f1edec;
 polstring: 1,2rem;
 font-family: 'Segoe UI', Tahoma, Geneve, Verdana, sans-serif;
 max-bredde: 45rem;
 margin: 0 auto;
 skriftstørrelse: 1,2rem;
}

Styling af harmonika

Skjul først afkrydsningsfelterne ved at ændre inputtet.

/* Skjuler afkrydsningsfelterne eller alternativknappen*/
input {
 position: absolut;
 opacitet: 0;
 z-indeks: -1;
}

Stil nu harmonikaen. Du kan tilføje en::efter pseudo-element for + skilt. Du kan henvise til en Character Entity Reference Chart og brug evt Entitetskonverteringsberegner for at finde CSS-værdien af ​​en numerisk værdi. Her er CSS-værdien af + er \002B.

/* Harmonika stilarter */
.faq {
 farve: #ffe3e3;
 margin-bund: 3rem;
}
.faq-label {
 skriftstørrelse: 1,5rem;
 display: flex;
 align-items: center;
 retfærdiggøre-indhold: mellemrum-mellem;
 polstring: 1em;
 baggrund: #b61818;
 font-weight: fed;
 markør: pointer;
 bruger-vælg: ingen;
}
.faq-label:: efter {
 indhold: '\002B';
 polstring: 0,51rem;
 transform: skala (1,8);
 tekst-align: center;
 overgang: alle 0,35s;
}
.faq-indhold {
 max-højde: 0;
 polstring: 0 1em;
 farve: #2c3e50;
 baggrund: hvid;
 overgang: alle 0,35s;
 display: ingen;
}

Lad os nu tilføje funktionalitet til harmonikaen ved hjælp af tilstødende og attributvælgere. Her, \2013 er CSS-værdi for –, den numeriske værdi repræsenterer –.

input: markeret + .faq-label {
 baggrund: #8f1414;
}
input: markeret + .faq-label:: efter {
 indhold: '\2013';
 transform: skala (1,5);
}
input: checket ~ .faq-content {
 max-højde: 100vh;
 polstring: 1em;
 display: blok;
 overgang: alle 0,35s;
}

Produktion:

Brug af radioknapmetoden

Radioknapmetoden har en inputtype indstillet til radio. Hver gang brugeren klikker på en fane, åbnes den skjulte alternativknap, der svarer til den fane. Når du klikker på den næste fane, lukker den forrige fane øjeblikkeligt. Du kan kun åbne én fane ad gangen ved at bruge radioknapmetoden.

HTML

Kun tilpasset CSS harmonika (Ofte stillede spørgsmål)

Brug af radioknapmetoden






Hvordan laver man harmonika ved hjælp af radioknapmetoden?


 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.









Hvordan laver man en tilpasset harmonika kun ved hjælp af CSS?


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









Hvad betyder harmonikastil?


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









Luk alle ×

CSS

Kopier ovenstående CSS fra Checkbox-metoden, da begge metoder kun adskiller sig fra strukturelt synspunkt. Du bemærker måske, at der er én fane åben hele tiden. Dette sker, fordi du ikke kan fjerne markeringen af ​​radioknapper som afkrydsningsfelter. For at opnå dette skal du tilføje nedenstående CSS-kode til en "Luk alt"-radioknap uden nogen beskrivelse.

/* Lukker alle */
.faq-label {
 stilling: relativ;
}
.faq-close {
 display: inline-blok;
 polstring: 1rem;
 skriftstørrelse: 1rem;
 baggrund: #b61818;
 markør: pointer;
 position: absolut;
 venstre: 64rem;
}

Produktion:

Fortsæt med at eksperimentere og tilføj animationer

Der er en simpel logik bag harmonikaer: Når du klikker på en menu, vises dens skjulte indhold. Da du nu ved, hvordan du laver en harmonika, er det på høje tid at implementere og eksperimentere med din læring. Du kan bygge vandrette harmonikaer for at forbedre designet, især når du viser billeder. Eksperimenter med koden ved at justere overgangseffekten ved hjælp af keyframe-animationer.

Naincy Mourya (16 artikler udgivet)

Naincy har specialiseret sig i at bygge meget responsive hjemmesider og effektiv indholdsstrategi sammen med webkopier. Hun er en freelance tech-skribent, der holder skarpt øje med trendende teknologier.

Mere fra Naincy Mourya