Neu Read more / read less in der Artikelübersicht

[m.jonas]

Guten Tag zusammen,

in unserer Artikelübersicht habe ich die Merkmale eines Artikels eingefügt.
Das sieht dann so aus:
https://www.jonas-deutscher.com/isolier-dichtungsmaterialien/epdm-zellkautschuk

Wenn ein Artikel also eine Stange voller Merkmale hat, wird die Produktbox etwas groß.

Daher versuche ich folgendes:
Den Container .col.productbox-details.col-xl-4.col-12 auf eine Höhe von bspw. max 200px zu beschränken und einen Read more/read less button einzufügen, sodass der Besucher die Option hat, alle Merkmale anzuschauen.

Im Optimalfall soll der Text hinter dem Button ausbleichen und der Container beim aktivieren des Buttons langsam nach unten ausfahren bzw. wieder langsam nach oben einfahren.

Bei mir scheitert es an folgender Stelle:
Entweder es funktioniert immer nur beim ersten Artikel auf der Seite oder (mein bisher größter Erfolg) es funktioniert bei allen Artikeln, jedoch nicht, wenn man dann zur Seite 2 navigiert.
Dann muss erst die Seite aktualisiert werden, dass es klappt.

Als Beispiel:
https://www.ofenseite.com/Kaminofen-La-Nordica-Svezia-New-10-kW

Zu sehen bspw. bei den "Technische Daten".
Leider wollte mir der Vertrieb des Templates (easyTemplate360) auch nicht gegen Bezahlung weiterhelfen

Über jede Hilfe bin ich dankbar.
Sollte es etwas mehr Aufwand sein, bitte eine Info mit Preis hierzu - vielen Dank!

Schönes Wochenende.

 

[css-umsetzung]

Ich hab dafür eine Lösung, diese kümmert sich automatisch um zu hohe Texte. Das hatte ich eigentlich mal für Kategorie Texte entwickelt aber es lässt sich letzten Endes auf alles anwenden.

übersteigt der Text eine gewisse Höhe, dann wird er automatisch eingekürzt, der Vorteil bei meiner Lösung ist, dass der Text nicht auseinandergerissen wird.

hier ein Beispiel wo ich meine Lösung in einer Produktbeschreibung verwende:
https://bit.ly/3PyupCb

oder eben hier in einer Kategorie:
https://bit.ly/3T1BcYd

Es lässt sich bestimmen, wie hoch der Textbereich max. sein darf bevor er durch meine Lösung eingekürzt wird.

 

[m.jonas]

@css-umsetzung
Vielen Dank für die schnelle Antwort.

So wie es in der Kategorie ausgegeben wird, ist es perfekt.

Funktioniert der Code auch bei mehreren gleich benannten Containern auf ein und derselben Seite?

Wenn ja, würde ich diesen auf jeden Fall gerne nehmen

 

[css-umsetzung]

Das ist eine Template Anpassung mit ein wenig JS und CSS, das lässt sich natürlich auch alles anwenden, muss eben nur angepasst werden.