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

  Tag 325
18.11.2024
C
Summe aller Downloads seit Januar 2020: 119704 [Stand: 21.11.2024 - 06:00 h]
 • Tag 325
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.

Das angepasste Script finden Sie unter
TIPP-Script

Sie wollen mit diesem Script einen Tipp mit einer Glühbirne anzeigen wie hier zu sehen?
Erstellt am 25.08.2024
Revision 00 vom 25.08.2024 - Erstellung Script und Seiteninhalt
website security
Letzte Aktualisierung: 18.11.2024
internet-abc.de   /
für Kinder, Lehrkräfte und Eltern
Zurück zum Seiteninhalt