CSS-Akkordeons werden häufig für erweiterbare und zusammenklappbare Menüs, Schnipsel, Bilder, Videos, FAQs, Listen und Artikelauszüge verwendet. Sie können sie ganz einfach mit HTML, CSS und JavaScript (oder jQuery) erstellen. Das Erstellen von Nur-CSS-Akkordeons ist eine etwas schwierige Aufgabe, aber in JavaScript-deaktivierten Umgebungen sehr hilfreich.

In dieser Anleitung erfahren Sie Schritt für Schritt, wie Sie ein reines CSS-Akkordeon erstellen.

Einfaches Akkordeon nur mit HTML bauen

Wenn Ihre Priorität darin besteht, ein barrierefreies Akkordeon mit HTML zu erstellen, ist die und Tags sind der richtige Weg. Es spielt keine Rolle, welche Programmiersprache Sie verwenden, das reine HTML-Akkordeon bleibt intakt. Ein... kreieren markiere als Elternteil und gib die Frage in a. ein Schild. Schreiben Sie eine beschreibende Antwort in a Schild. Wiederholen Sie den Prozess für eine beliebige Anzahl von FAQs.

FAQ 1



Lorem ipsum dolor, sit amet consectetur adipiscing 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



Consequntur 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 bei eligendi hic reprehenderit repellendus quos!

Das Akkordeon stylen

Sie können das Akkordeon stylen, indem Sie die Hintergrundfarbe, Grenzradius, Rand, Polsterung, etc.

Karosserie {
 Schriftfamilie:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Genf, Verdana, serifenlos;
 maximale Breite: 30rem;
 Rand: 1,5 rem automatisch;
}
Zusammenfassung {
 Schriftstärke: 600;
 Farbe: RGB (255, 255, 255);
 Hintergrundfarbe: rgb (7, 185, 255);
 Polsterung: 1,2 rem;
 Rand-unten: 1,2rem;
 Randradius: 0.5rem;
 Cursor: Zeiger;
}

Ausgabe:

Die einzige Einschränkung besteht darin, dass Sie nicht die Kontrolle über jeden einzelnen Teil des Codes haben. Die HTML-Struktur kann geändert werden, aber Sie können kein benutzerdefiniertes Akkordeon erstellen. Lassen Sie uns daher einen benutzerdefinierten FAQ-Bereich mit erweitertem CSS erstellen.

Erstellen Sie Ihren benutzerdefinierten FAQ-Bereich

Es gibt zwei beliebte Methoden, um ein benutzerdefiniertes Nur-CSS-Akkordeon zu erstellen. Sie können entweder Kontrollkästchen oder Optionsfelder verwenden; wir erklären beide Methoden.

Verwenden der Checkbox-Methode

Die Checkbox-Methode verwendet Kontrollkästchen als Eingabetyp. Immer wenn ein Benutzer eine Registerkarte auswählt, markiert er das Kontrollkästchen und es wird geöffnet. Mit der Checkbox-Methode können Sie mehrere Registerkarten gleichzeitig öffnen, ähnlich wie Sie mehr als ein Kontrollkästchen in einem markieren HTML-Formular.

HTML

Benutzerdefiniertes CSS-Only-Akkordeon (FAQ)

Verwenden der Checkbox-Methode






Wie baue ich ein benutzerdefiniertes Akkordeon nur mit CSS?


 Lorem ipsum dolor sit amet consectetur adipiscing elit. Harum debitis voluptas aliquid tenetur quas suscipit
 angenommen a, nesciunt eum nobis eaque, exercitationem differenzio alias ullam quia. Corrupti Beatae
 necessitatibus nihil.









Wie ändere ich die Höhe von Pseudoelementen?


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

Allgemeine CSS

Wenden Sie das grundlegende CSS auf den Körper an.

Karosserie {
 Farbe: #502c2c;
 Hintergrund: #f1edec;
 Polsterung: 1,2 rem;
 Schriftfamilie: 'Segoe UI', Tahoma, Geneva, Verdana, serifenlos;
 maximale Breite: 45rem;
 Rand: 0 automatisch;
 Schriftgröße: 1.2rem;
}

Das Akkordeon stylen

Blenden Sie zunächst die Kontrollkästchen aus, indem Sie die Eingabe ändern.

/* Ausblenden der Kontrollkästchen oder des Optionsfelds*/
Eingabe {
 Position: absolut;
 Deckkraft: 0;
 z-Index: -1;
}

Stylen Sie nun das Akkordeon. Sie können Folgendes hinzufügen::nach Pseudoelement für die + Unterschrift. Sie können auf a. verweisen Charakter-Entitäts-Referenztabelle und benutze irgendeinen Umrechnungsrechner für Entitäten um den CSS-Wert eines numerischen Werts zu finden. Hier ist der CSS-Wert von + ist \002B.

/* Akkordeonstile */
.FAQ {
 Farbe: #ffe3e3;
 Rand-unten: 3rem;
}
.faq-label {
 Schriftgröße: 1,5rem;
 Anzeige: flexibel;
 Ausrichten-Elemente: Mitte;
 rechtfertigen-Inhalt: Zwischenraum;
 Polsterung: 1em;
 Hintergrund: #b61818;
 Schriftdicke: fett;
 Cursor: Zeiger;
 Benutzerauswahl: keine;
}
.faq-label:: nach {
 Inhalt: '\002B';
 Polsterung: 0.51rem;
 transformieren: Skala (1.8);
 Textausrichtung: Mitte;
 Übergang: alle 0,35s;
}
.faq-Inhalt {
 maximale Höhe: 0;
 Polsterung: 0 1em;
 Farbe: #2c3e50;
 Hintergrund: weiß;
 Übergang: alle 0,35s;
 Anzeige: keine;
}

Jetzt fügen wir dem Akkordeon Funktionen hinzu, indem wir verwenden benachbarte und Attributselektoren. Hier, \2013 ist CSS-Wert für –, der numerische Wert repräsentiert –.

Eingabe: geprüft + .faq-label {
 Hintergrund: #8f1414;
}
Eingabe: geprüft + .faq-label:: nach {
 Inhalt: '\2013';
 transformieren: Skala (1,5);
}
Eingabe: geprüft ~ .faq-content {
 Max-Höhe: 100vh;
 Polsterung: 1em;
 Bildschirmsperre;
 Übergang: alle 0,35s;
}

Ausgabe:

Verwenden der Optionsfeldmethode

Die Optionsfeldmethode hat einen Eingabetyp, der auf eingestellt ist Radio. Immer wenn der Benutzer auf eine Registerkarte klickt, wird das ausgeblendete Optionsfeld für diese Registerkarte geöffnet. Wenn Sie auf die nächste Registerkarte klicken, wird die vorherige Registerkarte sofort geschlossen. Mit der Optionsfeldmethode können Sie jeweils nur eine Registerkarte öffnen.

HTML

Benutzerdefiniertes CSS-Only-Akkordeon (FAQ)

Verwenden der Optionsfeldmethode






Wie erstelle ich ein Akkordeon mit der Radio Button-Methode?


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









Wie erstelle ich ein benutzerdefiniertes Akkordeon nur mit 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.









Was bedeutet Akkordeon-Stil?


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









Alle schließen ×

CSS

Kopieren Sie das obige CSS der Checkbox-Methode, da sich beide Methoden nur aus struktureller Sicht unterscheiden. Möglicherweise stellen Sie fest, dass immer ein Tab geöffnet ist. Dies liegt daran, dass Sie Optionsfelder wie Kontrollkästchen nicht deaktivieren können. Fügen Sie dazu den folgenden CSS-Code ohne Beschreibung zu einem "Alle schließen"-Optionsfeld hinzu.

/* Alle schließen */
.faq-label {
 Position: relativ;
}
.faq-close {
 Anzeige: Inline-Block;
 Polsterung: 1rem;
 Schriftgröße: 1rem;
 Hintergrund: #b61818;
 Cursor: Zeiger;
 Position: absolut;
 links: 64rem;
}

Ausgabe:

Experimentieren Sie weiter und fügen Sie Animationen hinzu

Hinter Akkordeons steckt eine einfache Logik: Wenn Sie auf ein Menü klicken, wird dessen versteckter Inhalt angezeigt. Da Sie jetzt wissen, wie man ein Akkordeon erstellt, ist es höchste Zeit, Ihr Gelerntes umzusetzen und zu experimentieren. Sie können horizontale Akkordeons erstellen, um das Design zu verbessern, insbesondere beim Anzeigen von Bildern. Experimentieren Sie mit dem Code, indem Sie den Übergangseffekt mithilfe von Keyframe-Animationen anpassen.

Naincy Moury (16 Artikel veröffentlicht)

Naincy ist spezialisiert auf die Erstellung von Websites mit hoher Reaktionsfähigkeit und einer effizienten Inhaltsstrategie sowie auf Webkopien. Sie ist freiberufliche Tech-Autorin, die Trendtechnologien genau im Auge behält.

Mehr von Naincy Mourya