Einfaches Akkordeon im Joomla Beitrag

accordion

Mit einem Accordeon können Inhalte übersichtlich und gut strukturiert angezeigt werden. Typische Anwendungen im Webdesign sind FAQs oder Übersichtsseiten für Anleitungen und Ähnliches. 

Für Joomla stehen dem Webdesigner zahlreiche Plugins zur Verfügung, die aber vom Inhaltsersteller das Einhalten eines festgelegten HTML Konstrukts erfordern. Das ist unbequem und überfordert viele Anwender!

Deshalb haben wir einen Joomla Override entwickelt, der Anwender sicher ist, mit beliebigen Inhaltselementen umgehen kann und einfach in Joomla zu integrieren ist. Das JQuery Framework wird von meisten Templates verwendet und ist Voraussetzung. 

Funktion:

Der Inhaltsersteller setzt pro Akkordeon Tab eine Überschrift <h4>, der folgende Text mit Bildern, Listen usw. wird automatisch in den auf- und zuklappenden Container gesetzt.

Neues Beitragslayout per 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 > article wählen.

Jetzt ist im Editor Tab unter HTML > com_content > article ein neuer Override sichtbar. Ist es der erste Erstellte heißt er default sowie default_links und gilt für alle Beiträge. Ist bereits ein default override vorhanden ist der Name eine Kombi aus default + Datum + eindeutige Nummer. Diese neuen Dateien anklicken und dann den Button 'Datei umbenennen' klicken. Hier den gewünschten Layout Namen wählen. Bsp.: akkordeon und akkordeon_links. 

Im Beitrag wird der Override im Tab 'Optionen' jetzt als alternatives Layout angezeigt und zugewiesen!

Änderungen in akkordeon.php

In Zeile 114 wird der Beitragstext geladen:

<?php echo $this->item->text; ?>

Hier folgende Änderung einfügen:

<div class="panel-group" id="akkordeon">
<?php echo $this->item->text; ?>
</div>

Der Tag 'h4' muss der gewählten Akkordeon Überschrift entsprechen, also dem Überschrifts Tag der vom Inhaltsersteller im Beitrag verwendet werden soll.

JQuery Script

Dieses Script kann entweder in der template.js global eingefügt werden oder besser nur für das neue Layout direkt in der akkordion.php am Ende:

<script type="text/javascript">
(function($) {
$(window).load(function(){
if ( $('.akkordeon-end').length == 0){
$('#akkordeon h4').each(function(index, element){
$(this).addClass('closed').nextUntil('h4').wrapAll('<div id="collapse'+index+'" class="panel-collapse"></div>');
});
}
else{
$('#akkordeon h4:not(:last-of-type').each(function(index, element){
$(this).addClass('closed').nextUntil('h4').wrapAll('<div id="collapse'+index+'" class="panel-collapse"></div>');
});
$('#akkordeon h4:last-of-type').addClass('closed').nextUntil('.akkordeon-end').wrapAll('<div id="collapse-last" class="panel-collapse"></div>');
}
$('#akkordeon h4').click(function(){
if($(this).hasClass('closed')){
$('.opened').addClass('closed').removeClass('opened').next('.panel-collapse').slideToggle('slow', function(){});
$(this).toggleClass('closed opened').next('.panel-collapse').slideToggle('slow', function(){});
}
else{
$(this).toggleClass('closed opened').next('.panel-collapse').slideToggle('slow', function(){});
}
})
// open first akkordeon tab on load //
$('#akkordeon h4:first-of-type').toggleClass('closed opened').next('.panel-collapse').slideToggle('slow', function(){});
})
})(jQuery)
</script>

Beispiel CSS:

/* akkordeon */
#akkordeon h4{cursor:pointer;padding:10px 25px 10px 10px;border:1px solid #efefef;border-radius:5px;background:#ddd;}
.panel-collapse{display:none;padding:10px 25px;border:1px solid #efefef;}
#akkordeon h4:before{content:'+ ';}

Akkordeon Ende

Um Inhalte nach dem Akkordeon einzufügen, wird dem ersten HTML Element, das ausserhalb des Akkordeons liegen soll, die Klasse 'akkordeon-end' zugewiesen 

{jcomments on}

Go-Lux.de verwendet Cookies.

Mit der Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies verwenden. Hinweise zum Datenschutz 

OK