Accentsconagua

Erstellen einer Akkordeonkomponente mit CSS und einem Hauch von JavaScript

Web-Design
Share

Im heutigen Tutorial erfahren Sie, wie Sie eine CSS-Komponente zum Anzeigen / Verbergen mit etwas JavaScript erstellen. Standardmäßig stellt jQuery das bereit SlideToggle Methode, die es uns ermöglicht, Akkordeons mit einer Gleitbewegung zu erzeugen. Unsere Herausforderung besteht darin, diese Funktionalität mit reinem JavaScript nachzuahmen.

Hier ist die Komponente, die wir erstellen werden:

Hinweis: Dies ist eine Funktionalität, die von der

und Elemente, obwohl diese in Microsoft-Browsern noch nicht unterstützt werden. 

  • Erläuterung der Elemente "Details" und "Zusammenfassung"

    Viele JavaScript-Bibliotheken wurden entwickelt, um zusätzliche interaktive Widgets auf Websites bereitzustellen. Ebenso hat HTML5 eine Reihe populärer…
    Thoriq Firdaus
    HTML5

1. Das HTML

Zunächst definieren wir ein Element mit der Klasse von Container welches zwei Unterelemente enthält:

  • die Schaltfläche zum Ausblenden und Anzeigen des Inhalts (einschließlich eines Inline-SVG-Symbols)
  • der tatsächliche Inhalt

So sieht das aus:

2. Das CSS

Das CSS ist ziemlich unkompliziert. Wir müssen zwei Hilfsklassen definieren (d. H. verbergen und Show). 

Um das Zielelement auszublenden und zu enthüllen, verwenden wir die Höhe Eigenschaft, aber wir werden ihre Werte nicht in CSS angeben. Stattdessen setzen wir die Höhenwerte dynamisch über JavaScript. 

Zu beachten ist, dass wir das nicht verwenden Anzeige Eigenschaft zum Umschalten der Sichtbarkeit unserer Inhalte. Diese Eigenschaft zählt sich nicht zu den animierbaren CSS-Eigenschaften.

Hier sind die entsprechenden CSS-Stile:

.ausblenden display: none;  .show display: flex;  .info Überlauf: ausgeblendet; Übergang: Höhe 0,5 s;

3. Das JavaScript

Nun ist es Zeit zu diskutieren, wie unser JavaScript-Code funktionieren soll.

Sobald das DOM fertig ist, erhalten wir die Höhe des DOM .Info Element und setzen Sie sofort seinen Wert auf 0.

const info = document.querySelector (". info"); lassen Sie infoHeight = info.offsetHeight; info.style.height = 0;

Beachten Sie, dass je nach Inhalt (z. B. wenn er Bilder enthält) Sie den Code oben in das Symbol einfügen müssen Belastung Veranstaltung.

Als nächstes, wenn die .Toggle-BTN Button ist angeklickt wir machen folgendes:

  • Umschalten der Sichtbarkeit von .Weniger und .Mehr Elemente.
  • Berechnen Sie die Höhe von neu .Info Element. Wenn es 0 ist (anfangs geben wir ihm diesen Wert), bedeutet dies, dass der Inhalt ausgeblendet ist. Wir legen ihn offen, indem wir seine Höhe auf die ursprüngliche Höhe setzen (gespeichert im infoHöhe Variable). Wenn der Inhalt jedoch sichtbar ist, verbergen wir ihn, indem wir die Höhe auf 0 setzen.
  • Optional stellen wir sicher, dass die .Toggle-BTN wird nur einmal angeklickt, bis die Folienanimation abgeschlossen ist (dauert 500 ms). 

Hier ist der Code, der all dieses Verhalten implementiert:

const toggleBtn = document.querySelector (". toggle-btn"); const info = document.querySelector (". info"); const less = document.querySelector (". less"); const more = document.querySelector (". more"); // anfängliche Höhe let infoHeight = info.offsetHeight; toggleBtn.addEventListener ("click", function () this.disabled = true; more.classList.toggle ("show"); more.classList.toggle ("hide"); less.classList.toggle ("show") less.classList.toggle ("hide"); const infoNewHeight = info.offsetHeight; if (infoNewHeight == 0) info.style.height = '$ infoHeight px'; else info.style.height = 0; setTimeout (() => this.disabled = false;, 500););

Browser-Größe ändern

Im nächsten Schritt müssen Sie sicherstellen, dass die Komponente ordnungsgemäß funktioniert, wenn die Größe des Browserfensters geändert wird. 

Hier ist der notwendige JS-Code:

// Variablendefinitionen hier window.addEventListener ("resize", () => info.style.removeProperty ("height"); infoHeight = info.offsetHeight; if (more.classList.contains ("hide")) info .style.height = '$ infoHeight px'; else info.style.height = 0;);

4. Browserunterstützung

Unsere Demo sollte in allen aktuellen Browsern und Geräten gut funktionieren. Wie üblich verwenden wir Babel, um den ES6-Code auf ES5 herunterzukompilieren. 

Fazit

In diesem kurzen Tutorial haben wir eine Show / Hide-Komponente im Akkordeon-Stil mit CSS und JavaScript erstellt. Dank der animierbaren Höhe In dieser Eigenschaft haben wir es geschafft, unserer Komponente einen Slide-In / Slide-Out-Effekt hinzuzufügen. 

Insbesondere haben wir die Zugänglichkeit nicht in Betracht gezogen. Wenn Sie also die Funktionalität verbessern möchten, könnte dies sicherlich der nächste Schritt sein.

Weitere Tutorials „Mit einem Hauch von JavaScript“


Web-Design
×