Text per Mausklick ein- und ausblenden
Autor: Nicholas V.
Besucht 716,
Followers 1,
Geteilt 0
Hallo in die Runde!
Gerade schreibe ich einen langen Text... und möchte ausfühliche Anmerkungen gerne ausblenden, um den Text zunächst nicht zu sehr aufzublähen.
Die Besucher sollen dann auf einen "Link" klicken können, um die Anmerkungen zu öffnen. Die Anmerkungen sollen im gleichen Dokument angezeigt werden, damit man sie gemeinsam ausdrucken kann.
Es geht also um ein Ein- und Ausblenden, um die Lesbarkeit des langen Textes zu erhöhen. Siehe https://gemigo.de/wohlstand-fuer-alle.html
Die folgenden Lösungen funktionieren meiner Meinung nach NICHT (perfekt):
- Eine ähnliche Frage gab es schon mal 2013 in polnischer Sprache: https://helpcenter.websitex5.com/de/post/78375 Dort wurde u. a. ein jQuery-Objekt vorgeschlagen, welches aber nicht leicht zu realisieren ist. Außerdem kann man dort keine Hyperlinks einbauen... wenn ich dies korrekt getestet habe.
- Das X5-Modul "Accordion Text/FAQ" kann zwar per Mausklick ein- und ausblenden, aber es verfügt über keinen echten Editor. Also muss man die Fettschreibung mit HTML-Tags gestalten... das kann nicht jeder. Und die manuellen HTML-Tags funktionieren überhaupt nicht.
Abgesehen davon ist das Zerlegen des Haupttext und das Editieren der Texte und Anmerkungen eine echte Qual!
Also: Gibt es noch eine andere Möglichkeit?
Wenn nicht, dann möchte ich diesen Beitrag bitte als Anregung einbringen.
Beste Grüße an Alle!
Gepostet am
Nach einigem Suchen bei Google habe ich einen passenden Code gefunden, siehe
Code >> https://a-fangauf.jimdo.com/proyectos-basteleien/website/text-aufklappen/
Damit können das Text-Objekt und dessen Textformatierungen genutzt werden, allerdings arbeiten nicht alle Formatierungen fehlerfrei, deshalb einfach testen was geht und was nicht.
Kurze Anleitung:
1) Der Javascript-Teil (Nr. 1 - siehe Link oben) wird kopiert und bei WebSite X5 unter ...
3 Sitemap
... wird die betreffende Seite markiert und oben auf "Eigenschaften" geklickt. Dann im Reiter "Erweitert" den kopierten Javascript-Teil einfügen bei ...
Benutzerdefinierter Code
Vor dem </HEAD> Tag
2) Im Text-Objekt von WebSite X5 wird der andere Code (Nr. 2 - siehe Link oben) eingefügt. Dabei muss dass HTML-Symbol angeklickt, damit es blau umrandet ist und der Code ausgeführt wird.
Meine Testseite >> https://findelinks.de/123shop-hosteurope/text-aufklappen.html
----- Screenshots -----
-----
Bei mehrmaliger Verwendung des Codes auf einer Seite bei jedem zusätzlichen Code 5 mal die Zahlen anpassen (siehe Screenshot unten) und zwar bei jedem zusätzlichen Code die gleichen 5 Zahlen verwenden, aber es dürfen niemals die Zahlen der anderen Codes sein, sonst gibt es Fehler.
Wenn der Text bei einem Codes aufgeklappt wird, dann schließt der Text beim anderen Code, falls diese geöffnet ist, so dass immer nur ein Text aufgeklappt ist.
Wenn der Text bei mehreren Codes offen bleiben soll, dann müssten die Javascript-Experten den Code anpassen, da ich nur geringe Javascript-Kenntnisse habe.
Auf der Testseite (Link oben) sind jetzt 3 Codes vorhanden.
-----
Autor
@ Daniel: Vielen Dank für den Tipp. Sehr interessant. Das sollte man sich merken. Dies ist aber eine Hardcore-HTML-Lösung, die naturgemäß sehr fehleranfällig ist. Der Komfort ist gleich null. Aber es sieht aus wie eine Lösung!
Da ich ggf. alle Texte aufgeklappt lassen, damit man sie ggf. gemeinsam mit dem Haupttext ausgedruckt werden können, ist dies aber keine Lösung.
Was ist wenn du im Text wo die Anmerkung auftauchen soll es per LINK und Mouseover anzeigt?
den Text markieren und auf einen LINK gehen und dort beim Reiter "tooltip" den Text eingeben. Dieser taucht dann in einer Sprechblase oder Kästchen auf! Allerdings kann dieser nicht ausgedruckt werden.
Wenn alle aufgeklappten Texte aufgeklappt bleiben soll, dann diesen Teil ...
if(whichIsOpen != 0) {
hideText(whichIsOpen);
}
... beim Javascript-Code entfernen. Ich habe es getestet und es funktioniert.
Test >> https://findelinks.de/123shop-hosteurope/text-aufklappen.html (evtl. F5 drücken)
-----
Es ist war etwas Code im Text-Objekt vorhanden, aber dafür können auch die Funktionen für Textformatierungen, die Auswahl der Schriftarten und -größen oder die Verlinkung des markierten Textes genutzt werden, ohne dass weiterer HTML-Code gebraucht wird.
Das Einbinden von Bildern ist möglich, aber nicht ganz einfach, evtl. muss mit <br> nach dem Bild ein Zeilenumbruch eingefügt werden oder ähnliches, um Fehler zu verhindern.
Ganz kann auf ein <br> nicht immer verzichten werden, auch treten hin und wieder Fehler auf, deshalb immer mit der Vorschau testen was geht und wo kleine Änderungen zu machen sind.
Ich hoffe, dass es trotz kleiner Einschränkungen eine hilfreiche und nützliche Funktion ist.
x Nicholas V., ... (It > De) ... Ich weiß nicht, ob ich verstanden habe, was Sie erreichen möchten, ... aber wenn Sie Ihre aktuelle wohlstand-fuer-alle.html-Seite mit erweiterten Notizen (+) drucken möchten, können Sie mit EXTRA eine Erfindung von mir verwenden Code.. .
... wenn Sie das erreichen möchten und Interesse haben. Sagen Sie mir Bescheid, und vielleicht komme ich morgen wieder hierher ...
.
Nachtrag:
Der 1. Screenshot zeigt wie das Bild eingefügt und nach dem Bild ein <br> angefügt wurde.
Das eingefügte Bild von Pixabay wurde riesengroß im Text-Objekt angezeigt. Dann wurde das Bild angeklickt bis ein feiner gestrichelter Rand erschien, nun mit der rechten Maustaste angeklickt und beim Auswahlmenü auf "Eigenschaften des Bildes" geklickt, hier wurde Breite von 450 angegeben.
Der 2. Screenshot zeigt wie dieser Teil dann später im Browser aussieht.
Am Anfang ist der Umgang mit dem zusätzlichen Code etwas ungewohnt, aber die Vorteile des Auf- und Zuklappens sollten das aufwiegen.
Ich denke, damit ist soweit alles erklärt - oder gibt es noch Fragen?
----- Ansicht Text-Objekt -----
----- Ansicht Vorschau -----
Autor
Wow, vielen Dank für die tollen Antworten. Die Community begeistert mich immer wieder!
@KolAsim: Ja, ich bin an dem Code interessiert.
@ Daniel W.: Das sieht super aus. Ich versuche das mal nachzubauen... und melde mich dann wieder.
Habt einen großartigen Tag!
... OK ... ...... mein hier angehängter exklusiver EXTRA-Code für die Seite wohlstand-fuer-alle.html fügt einen EXTRA-Button hinzu, um den Inhalt der Seite in erweiterter Form drucken zu können...
.
ciao
.
...Fügen Sie den Code in den Expertenbereich der Seiteneigenschaften ein, genau in diesem Abschnitt:
>> Schritt 3 - Sitemap > 'Eigenschaften der Seite' Fenster > Funktionen im Bereich Erweitert | ▪Benutzerdefinierter Code:
> 3. Möglichkeit > Vor dem </HEAD> Tag
.
ciao
.