FAQ-Script - Scripte, Animationen, Templates und Tipps für WebsiteX5 -

Tag 42
09.02.2025
C
Summe aller Downloads seit Januar 2020: 132305 [Stand: 11.02.2025 - 14:00 h]
 •  Tag 42
Direkt zum Seiteninhalt

FAQ-Script

Themenseiten
Das FAQ-Script in HTML-Code unterteilt eine Seite in einzelne Sektionen, die mittels eines "Buttons" angezeigt und auch wieder verborgen werden.
Es war mir wichtig, dass das Script ohne zusätzliche Dateien eingesetzt werden kann. So ist es z.B. ideal für kleine  "One-Pager", "Tutorials" oder für eine FAQ-Seite. Die einzelnen Komponenten habe ich als Module bereits vorbereitet, damit es einfacher wird, wenn man beliebig viele Kapitel benötigt (8 Module finden Sie in der ZIP-Datei). Diese Module können in ihrer Seite in Folge eingefügt werden. Anschließend können Sie Ihre Inhalte  zwischen <section> und </section> einfügen.

Hier ein Beispiel mit drei Themen:

Das Script besteht aus:
Das Script besteht aus HTML, CSS und Javascript. Ich habe bewusst kein Bootstrap oder jQuery verwendet, da die Codemenge, die durch diese JS-Dateien hinzu geladen würde, in keiner Relation zur Funktionalität stehen würde. Desweiteren ist das Script so viel leichter an eigene Bedürfnisse anpassbar und für Einsteiger wesentlich besser geeignet, den Quellcode zu verstehen und anzupassen.


Das CSS im Script:
Im ersten Abschnitt befindet sich der CSS-Teil. Hier können Fontfamilie, - Größe, - Farbe geändert werden. Das Script passt sich an Ihr Inklusiv-Objekt ''</> HTMLCode'' an. Dann wird für jede neue Anzeige ein weiteres Script-Modul angefügt und Sie müssen nur noch Ihren Inhalt einfügen. Hierbei verwenden Sie am Besten HTML-Code. Sie können auch PHP-Code einfügen, wenn Sie ihre Seite auf PHP einstellen.


Das CSS im Script:
Sie ziehen an gewünschter Stelle in Ihrer Projektseite das Inklusiv-Objekt ''</> HTMLCode'' hinein und offnen es mit einem Doppelklick. Nun fügen Sie dieses Script ein und bearbeiten den Inhalt. Im jeweilgen Modul geben Sie das Thema ein - einmal der Text mit dem Thema des Inhalts und dann der Text wie zum Beispiel '' weniger anzeigen''. Für jedes Thema ein neues Modul. Denn jedes Thema muss ein angepasstes Javascript verwenden werden. Der Inhalt wird dann zwischen <section> und </section> ein.
Und so gehen Sie vor, nachdem Sie das Inklusiv-Objekt "J HTML-Code" in Ihre Seite gezogen haben (s. Abb. 1). Fügen Sie nun Ihr Script in das Inklusiv-Objekt "J HTML-Code" ein und klicken anschließend auf den Button "Ränder" (s. Abb.2) und klicken dann auf den Button für die "Ausrichtung" (s. Abb.3) um hier die Anzeige für links-oben (Abb.4) einzustellen. Klicken Sie anschließend oben rechts in Ihrer Software auf den OK Haken. Jetzt müssen Sie nur noch den Ordner <FAQ_icons> in die oberste Hierarchie Ihres Servers hochladen. Fertig.
Und hier können Sie sich das Script herunterladen
Das gleiche Script mit einem Icon-Ordner mit Büchern in mehreren Farben zum Herunterladen.

Das Script besteht aus HTML, CSS und Javascript. Ich habe bewusst kein Bootstrap oder jQuery verwendet, da die Codemenge, die durch diese JS-Dateien hinzu geladen würde, in keiner Relation zur Funktionalität stehen würde. Desweiteren ist das Script so viel leichter an eigene Bedürfnisse anpassbar und für Einsteiger wesentlich besser geeignet, den Quellcode zu verstehen und anzupassen.


Im ersten Abschnitt befindet sich der CSS-Teil. Hier können Fontfamilie, - Größe, - Farbe geändert werden. Das Script passt sich an Ihr Inklusiv-Objekt ''</> HTMLCode'' an. Dann wird für jede neue Anzeige ein weiteres Script-Modul angefügt und Sie müssen nur noch Ihren Inhalt einfügen. Hierbei verwenden Sie am Besten HTML-Code. Sie können auch PHP-Code einfügen, wenn Sie ihre Seite auf PHP einstellen.


Sie ziehen an gewünschter Stelle in Ihrer Projektseite das Inklusiv-Objekt ''</> HTMLCode'' hinein und offnen es mit einem Doppelklick. Nun fügen Sie dieses Script ein und bearbeiten den Inhalt. Im jeweilgen Modul geben Sie das Thema ein - einmal der Text mit dem Thema des Inhalts und dann der Text wie zum Beispiel '' weniger anzeigen''. Für jedes Thema ein neues Modul. Denn jedes Thema muss ein angepasstes Javascript verwenden werden. Der Inhalt wird dann zwischen <section> und </section> eingefügt.

Sie möchten gerne andere Icons verwenden? Hier ein Pack mit den "Klassikern" Plus und Minus
Sie suchen ein klassisches FAQ-Script mit Pfeilen und ?
In diesem Script sind bereits 8 Module für  acht einzelne Fragen und Antworten vorbereitet. Das Script passt sich auch in der Schriftgröße responsiv an das gewählte Endgerät an. Nicht benötigte Module können gelöscht oder weitere hinzugefügt werden. Eine Kurze Anleitung im PDF-Format ist in der ZIP-Datei mit enthalten.
Hier eine kleine Ansicht mit 3 Modulen zum testen:

Überschrift
Hier geben Sie Ihren Text ein...

Überschrift
Hier geben Sie Ihren Text ein...

Überschrift
Hier geben Sie Ihren Text ein...

Das angepasste Script finden Sie unter
TIPP-Script

Sie wollen mit diesem Script einen Tipp mit einer Glühbirne anzeigen wie hier zu sehen?
FAQ
Erstellt am 25.08.2024
Revision 01 vom 16.01.2025 - Ergänzung um ein klassisches Script mit Pfeiltasten
website security
Letzte Aktualisierung: 09.02.2025
internet-abc.de   /
für Kinder, Lehrkräfte und Eltern
Zurück zum Seiteninhalt