Web Designer 11 Premium Text ausklappen

thomas-frey schrieb am 03.02.2018 um 15:57 Uhr

Hallo zusammen,

ich habe ein Problem auf meiner Seite. (http://foto-leer.de/leistungen.htm)

Die Texte sollten klappbar sein und ich habe für jeden "ausgeklappten" Text eine Seite erstellt und diese alle querverlinkt.

Leider springt die Seite bei jedem Klick wieder ganz nach oben was sehr störend beim lesen ist.

Kann man das irgendwie verhindern? Noch besser wäre wenn man den Text mit einem kleinen "+" Button o.ä. aus- und wieder einklappen könnte. Ich habe jedoch keine einfache Lösung hierzu gefunden und die Suche hat mir auch nicht weitergeholfen.

Ich hoffe deshalb das mir einer von Euch weiterhelfen kann.

Gruß Thomas

Kommentare

BeRo schrieb am 03.02.2018 um 23:42 Uhr

[...] besser wäre wenn man den Text mit einem kleinen "+" Button o.ä. aus- und wieder einklappen könnte. [...]

Wie Du vielleicht schon geahnt hast, bist Du nicht der Erste, der diese Frage stellt. 😇 Entsprechend zahlreich sind die Lösungsversuche für das Problem.

Die schlechte Nachricht vorab: Es gibt keine "einfache Lösung" für den sogenannten Akkordeon Effekt 😖

  • Hier, bei Google findest Du eine erste Übersicht der Möglichkeiten.
  • Hier wird sehr detailliert erklärt, wie so etwas umgesetzt werden kann, wenn man sich den Umgang mit HTML-, CSS-, und/oder JavaScript zutraut.
  • Hier findest Du einen Forum Thread, in dem ich eine CSS basierte Lösung vorgestellt habe.

Lies Dich mal ein, vielleicht ist ja was für Dich dabei...

Viel Erfolg

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

peter_berg64 schrieb am 05.02.2018 um 11:02 Uhr
Kann man das irgendwie verhindern? Noch besser wäre wenn man den Text mit einem kleinen "+" Button o.ä. aus- und wieder einklappen könnte. Ich habe jedoch keine einfache Lösung hierzu gefunden und die Suche hat mir auch nicht weitergeholfen.

Hallo Thomas,

ich habe das mit Ankern versucht zu lösen, hier die Seite dazu:

http://www.ledda-sicher-sauber.com/gebaeudereinigung.htm

Ich hoffe, dass meintest du mit Deiner Frage.

LG

Peter

thomas-frey schrieb am 09.02.2018 um 12:34 Uhr

Wie funktioniert das mit den Ankern denn genau ? ist das eine Funktion im Web Designer ohne Programmierarbeit ?

thomas-frey schrieb am 09.02.2018 um 13:12 Uhr
  • Hier wird sehr detailliert erklärt, wie so etwas umgesetzt werden kann, wenn man sich den Umgang mit HTML-, CSS-, und/oder JavaScript zutraut.
  •  

Lies Dich mal ein, vielleicht ist ja was für Dich dabei...

Viel Erfolg

Das zweite Beispiel sieht MEGA aus. Ich müsste nur die Button Farbe anpassen. Dieser Windowsähnliche Farbverlauf mit Blaustich passt leider überhaupt nicht. Das mach ich dann im /head code oder ? Weisst du zufällig welche Sektion?

Wenn ich das hinbekomme wäre das die TOP Lösung!

thomas-frey schrieb am 13.02.2018 um 12:54 Uhr
Hier findest Du einen Forum Thread, in dem ich eine CSS basierte Lösung vorgestellt habe.


Hey Bero,

ich habe deinen Vorschlag umgesetzt und auch deine Projektdatei umgeschrieben. Auf Computern funktioniert es top, aber auf der mobilene lassen sich die Reiter nicht klicken. Hast du eine Idee warum?

BeRo schrieb am 13.02.2018 um 17:34 Uhr

[...] auf der mobilene lassen sich die Reiter nicht klicken. [...]

Das ist immer dann normal, wenn für die Darstellung von Effekten Scriptcode verwendet wird, der über IDs und/oder CSS Klassen aktiviert wird.
Da der WD die mobilen- und die Desktop Varianten in einer einzigen HTML Datei anlegt, kommen sich die per Scriptcode angelegten Funktionen in die Quere, weil zu keinem Zeitpunkt klar ist, welche Varianten denn nun von dem angelegten Code gesteuert werden soll...

Abhilfe:
Leg' den Scriptcode für die mobile Variante neu an, mit anderen IDs und anderen CSS Klassen, dann klappt's auch in der mobilen Variante.
Du kannst den in der Desktop Version verwendeten Scriptcode dazu einfach duplizieren. Du musst anschließend nur noch die Klassen (Namen)- und die IDs ändern...

So kann das im HTML Code aussehen:

Und so im CSS Code:

Und so in der mobilen Ansicht, wenn Du alles richtig gemacht hast.

Die online Demo kannst Du hier "bewundern". 😊

Viel Erfolg

Zuletzt geändert von BeRo am 14.02.2018, 11:20, insgesamt 3-mal geändert.

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

thomas-frey schrieb am 14.02.2018 um 16:55 Uhr

PERFEKT !