TYPO3: Read-More / Weiterlesen Button für normale Inhalte per jQuery

Readmore für tt_content

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 🙂