Accordion im Einleitungs Text
Menu Kategorie Blog Override
in Erweiterungen > Templates wird mit Klick auf das aktive Template (nicht Stil) der Template Editor geöffnet. Der Tab 'Overrides erstellen' öffnet die möglichen Overrides. Hier in Komponenten die com_content > category wählen.
Jetzt ist im Editor Tab unter HTML > com_content > category ein neuer Override sichtbar. Ist es der erste Erstellte heißt er blog.php plus weitere Dateien blog* und*. Ist bereits ein default override vorhanden ist der Name eine Kombi aus blog + Datum + eindeutige Nummer. Diese neuen Dateien anklicken und dann den Button 'Datei umbenennen' klicken. Hier den gewünschten Layout Namen wählen. Bsp.: accordion und accordion_items.
Im Menu ist der Override jetzt als alternativer Eintragstyp verfügbar!
Änderung ing blog_item.php
ca. Zeile 52 ->
<div class="panel-group">
<?php echo $this->item->introtext; ?>
</div>
template.js
Das JQuery Script nicht direkt in die blog-item.php einbinden! Da die Blogseite zahlreiche items haben kann, würde das Script ebenso oft geladen werden.
Entweder direkt in die blog.php einbinden oder von dort als eigenständige Datei aufrufen:
blog.php als letze Zeile einfügen ->
<script src="/templates/XXX-dein-Template-XXX/js/blog_accordion.js" type="text/javascript"></script>
blog_accordion.js:
(function($) {
$(window).load(function(){
$('.panel-group').each(function(){
if ( $('.accordion-end').length == 0){
$(this).find('h4').each(function(index, element){
$(this).addClass('closed').nextUntil('h4').wrapAll('<div id="collapse'+index+'" class="panel-collapse"></div>');
});
}
else{
$(this).find('h4:not(:last-of-type)').each(function(index, element){
$(this).addClass('closed').nextUntil('h4').wrapAll('<div id="collapse'+index+'" class="panel-collapse"></div>');
});
$(this).find('h4:last-of-type').addClass('closed').nextUntil('.accordion-end').wrapAll('<div class="panel-collapse"></div>');
}
});
$('.panel-group h4').click(function(){
if($(this).hasClass('closed')){
$('.opened').addClass('closed').removeClass('opened').next('.panel-collapse').slideToggle('slow', function(){});
$(this).addClass('opened').removeClass('closed').next('.panel-collapse').slideToggle('slow', function(){});
}
else{
$(this).addClass('closed').removeClass('opened').next('.panel-collapse').slideToggle('slow', function(){});
}
})
})
})(jQuery)
Donec rhoncus arcu et erat consequat, in rhoncus velit ultrices. Quisque non ex ullamcorper, aliquam justo sed, pellentesque mi. Fusce et dui eget urna tincidunt eleifend. Curabitur tempus neque vitae ultrices commodo.
Nam consequat luctus cursus. Mauris risus leo, pulvinar ut nibh eu, consectetur porttitor ligula. Donec quis mi convallis, maximus metus vel, rutrum justo. Integer sed sem a nulla eleifend dictum. Integer dolor neque, tristique sed leo eget, posuere faucibus eros. Ut lacus erat, pharetra ac porttitor ut, interdum a eros. Aenean lobortis, augue vel porta auctor, mauris justo sagittis dui, vel ultrices elit orci non nunc. Maecenas porta purus nec quam viverra, sed consequat est mattis. Nam sodales pharetra dui, quis vestibulum quam fermentum in.
Morbi sit amet neque in quam consequat cursus eget ac sapien. Cras quis auctor nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi rhoncus nec sem vitae iaculis. Sed eleifend sit amet leo ac tincidunt.
Morbi suscipit eros at aliquet lobortis. Praesent tellus dolor, porta in massa sit amet, semper porttitor justo. Pellentesque gravida lorem id turpis luctus suscipit. Cras congue ipsum urna, scelerisque efficitur mi convallis nec. Curabitur in nulla eget ipsum vulputate facilisis. Sed ut neque arcu. Sed a mauris vel nunc iaculis bibendum. Fusce id sagittis lacus, vitae bibendum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.