TYPO3: Read-More / Weiterlesen Button für normale Inhalte per jQuery
Hier mal wieder ein schnelles Snippet für Zwischendurch. Möchte man dem Redakteur eines TYPO3 Systems die Möglichkeit geben, normale Inhaltslemente (tt_content) in einen „Vorschautext“ und einen „Weiterlesen“-Text zu trennen, so muss man nicht unbedingt auf eine Extension zurückgreifen.
Mit nur ein wenig Typoscript und jQuery kann man Teile eines Textes ausblenden und beim Klick auf eine Schaltfläche wieder einblenden und dabei dem Redakteur die Möglichkeit geben, an welcher Stelle die Trennung erfolgen soll.
Dafür definieren wir zunächst eine Konstante (TOPLEVEL) im Typoscript:
constants.MORE = <div class="content-readmore">Weiterlesen</div> # Konstanten müssen ggf. noch in der ParseFunc aktiviert werden # lib.parseFunc_RTE.constants = 1 # lib.parseFunc.constants = 1
Dank dieser Konstante kann der TYPO3 Redakteur nun im RTE von Inhaltselemente einfach den Marker ###MORE### reinschreiben.
An dieser Stelle erfolgt dann die Trennung durchs Javascript in einem Akkordeon.
$(document).ready(function() { // Marker vorhanden? if($('.content-readmore').length) { // Alle durchlaufen $('.content-readmore').each(function() { var $button = $(this); var $parent = $button.parent(); // Text nach dem Marker wrappen $parent.append('<div class="temp-content-readmore-end"></div>'); $button.nextUntil('.temp-content-readmore-end').wrapAll('<div class="readmore-text" />'); $('.temp-content-readmore-end',$parent).remove(); // Button ans Ende des Elements setzen $button.appendTo($parent); // Weiterlesen Text holen und Höhe merken var $readMoreText = $parent.find('.readmore-text'); var height = $readMoreText.height(); // Höhe auf 0 setzen $readMoreText.css('height','0px'); // Ausfahren bei Klick $button.click(function() { $readMoreText.toggleClass('shown'); // Wir lassen unseren Button nach der Betaetiung verschwinden $button.remove(); if($readMoreText.hasClass('shown')) { $readMoreText.css('height',height+'px'); } else { $readMoreText.css('height','0px'); } }); }); } )};
Die Animation erfolgt bei uns durch CSS Transitions (man könnte auch Javascript benutzen). Die weitere Gestaltung der Schaltfläche ist natürlich euch überlassen 🙂
/** * Content Read More */ .content-readmore { color: #143353; padding: 5px 13px 5px 20px; background: #f2f2f1; cursor: pointer; display: inline-block; border-radius: 3px; -webkit-border-radius: 3px; } .content-readmore:hover { color: #fff; background: #1f9cd9; } .readmore-text { overflow: hidden; -webkit-transition: height 300ms ease-out; -moz-transition: height 300ms ease-out; -o-transition: height 300ms ease-out; -ms-transition: height 300ms ease-out; transition: height 300ms ease-out; }
Für Performanceoptimierungen des Javascripts bin ich natürlich immer offen 🙂
phantastisch – war nur eine Klammer in Zeile 41 falsch gesetzt – aber sonst ein ganz hervorragendes Script!
Hallo, habe dazu eine kleine Frage.
Benutze Typo3 8.7, der Button wird auch angezeigt nur ist der Text danach nicht weg sondern steht ganz normal dahinter.
Gibt es da einen Lösungsansatz?
LG
Hallo Marcel,
klingt nach einem CSS oder Javascript-Fehler. Hast Du mal einen Link wo man sich das angucken kann?
Sonderbar. Das Script wird bei mir gar nicht erst geladen..?! Es erscheint nur ###MORE###
Ahh. Ein Rechtschreibfehler bei der Konstante. Allerdings greift das Script noch immer nicht. Der Button taucht zwar auf, jedoch kommt der Text direkt dahinter… ?!
Hast Du das Javascript eingebunden und gibt es eventuell Javascript Fehler in der Konsole unter F12? (jQuery wird vorausgesetzt)
ja. Uncaught SyntaxError: missing ) after argument list
In Zeile 41 gehört ) ja nicht rein. 😉
also }) ist richtig. Aber das:
jQuery.Deferred exception: $button.nextToUntil is not a function TypeError: $button.nextToUntil is not a function
bekomme ich nicht gelöst. (jQuery3 min)
soll sollte nextUntil sein und nicht nextToUntil
Perfekt. Jetzt läuft es….