Wie man mit Akkordeon in CSS3 arbeitet - dummies

Sie verwenden das Akkordeon in CSS3, um Seitenelemente aus der Ansicht auszublenden. Wenn ein Benutzer eine Kategorie auswählt, werden die Elemente in dieser Kategorie sichtbar und die Elemente aus allen anderen Kategorien werden ausgeblendet. Der Effekt besteht darin, die Aufmerksamkeit des Benutzers zu fokussieren und den Benutzer bei der Ausführung bestimmter Aufgaben effizienter zu machen. Der folgende Code ist alles, was Sie brauchen, um diese Funktion nutzbar zu machen.

$ (function () {$ ("# Konfiguration"). Accordion ();});

Der Code ist kurz, aber das Geheimnis in diesem Fall ist die Art und Weise, wie Sie die Tags für Ihre Seite erstellen. Beachten Sie, dass das Akkordeon-Widget die Einstellungen, auf die sich der Benutzer nicht konzentriert, ausblendet. Wenn der Benutzer auf Hintergrundfarbe klickt, werden die Optionen für die Vordergrundfarbe ausgeblendet. Wenn Sie auf Optionen klicken, werden die Steuerelemente für Optionen ebenfalls angezeigt.

Die Steuerelemente in jedem Bereich spielen für das Akkordeon-Widget keine Rolle, die HTML5-Formatierung jedoch. Dieses Formular enthält auch eine Schaltfläche zum Senden. Wenn Sie die Steuerelemente nicht ordnungsgemäß konfigurieren, wird die Schaltfläche "Senden" Teil des Akkordeon-Effekts. Wenn Sie darauf klicken, wird das Formular nicht mehr übermittelt. Hier ist eine komprimierte Ansicht des HTML5 für dieses Beispiel:

Vordergrundfarbe
Rot 

… Weitere Eingaben und Beschriftungen …

Hintergrundfarbe
Rot 

… Weitere Eingaben und Beschriftungen …

Optionen
Verwendung Spezialklänge 

Spezialeffekte verwenden

Beachten Sie, dass Sie die Überschriftensteuerungsgruppen innerhalb einer separaten Position platzieren müssen und diese dann als die für den Akkordeon-Effekt zu verwenden. Ein separates enthält die einzelnen Steuerelemente für eine bestimmte Gruppe. Die Schaltfläche "Senden" ist Teil des Formulars, befindet sich jedoch außerhalb der Konfiguration.

Wenn Sie auf die Schaltfläche Konfiguration ändern klicken, sehen Sie, dass das Formular so funktioniert, wie es sollte - indem es den Inhalt des Adressfelds überprüft. Mit den Standardeinstellungen enthält die resultierende URL Akkordeon. html? Vordergrund = Rot & Hintergrund = Rot, wenn Sie auf Konfiguration ändern klicken.