Accordion - "weiterlesen / mehr anzeigen"-Funktion

[Jonathan]

Moin,

ich würde gerne einen Text nur teilweise anzeigen lassen und über einen "weiterlesen" oder "mehr anzeigen" Button dann den Text einblenden.

Von der Funktionalität wie ein Accordion-Einzelelement.

Damit das Accordion geschlossen bleibt habe ich zwei Möglichkeiten gefunden:

1. Das j_accordion.html5 bearbeiten – allerdings brauche ich auf einer anderen Seite die "normale" Funktion des Accordion.

2. Den ersten Accordion-Eintrag leer lassen und über eine CSS-Klasse z.B. .hide ausblenden

Gibt es noch eine andere Möglichkeit das ordentlich umzusetzen?

Idealerweise könnte der Text/Button "mehr anzeigen" durch "weniger anzeigen" ersetzt werden und ans Ende des ausgeklappten Textes wandern?

[Tim]

Hi,
mit reinem CSS könntest du dein Text-Element in der Höhe beschneiden und bei Hover vollständig anzeigen. Das wäre eine Möglichkeit mit reinem CSS.

Interaktiver und auch mit Text tauschen, benötgist du Javascript. jQuery hat Funktionen wie toggleClass und slideToggle, die Wechselwirkungen direkt abbilden.

[Jonathan]

Ich kenne mich leider zu wenig mit Javascript aus um den Tip umsetzen zu können.

Diese Funktion würde ich mir für ein Update wünschen.

Der Vorschlag mit Hover per CSS würde dann aber auf dem Handy nicht so toll funktionieren, oder?

[Tim]

Ich hab dir eine kleine flinke Lösung für das Contao Text-Element gebastelt.

Imgrunde wird die Text-Box in der Höhe beschnitten und nach Klick wieder unbeschnitten dargestellt. Ein Mehr anzeigen, Weniger anzeigen, Button wird entsprechend dem Zustand sichtbar/unsichtbar geschaltet.

Anbei das Template. Kopieren nach /templates und in deinem Text-Element auswählen

CSS in die customize.css einsetzen

.read_more_container .content {height: 0; overflow: hidden;}
.read_more_container.show .content {height: auto;}
.read_more_container .show_more, .read_more_container .show_less {display: none;}
.read_more_container:not(.show) .show_more {display: block;}
.read_more_container.show .show_less {display: block;}

[Jonathan]

Hallo Tim,

ganz lieben Dank! Das ist wirklich eine sehr große Hilfe!

Für alle die es vielleicht auch einsetzen wollen: die erste Zeile des CSS muss lauten:

 .read_more_container .content {height: 0px; overflow: hidden;}

Mit etwas Hilfe habe ich das Template um einen Slide-Effekt erweitert. Das Einfügen von CSS entfällt bei diesem Template jetzt ebenfalls.

[liebling65]

Sehr cool, aber der Slide arbeitet bei mir genau andersrum.... durch das display=none wird erstmal nichts (garnichts) angezeigt (ausser "mehr erfahren..." - bei klick darauf wird der Rest versteckt, bei "weniger anzeigen..." slidet der Text wieder nach unten (aber auch nicht der ganze Text)