Einfaches Accordion im Joomla Beitrag

accordion

Mit einem Accordion 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 Accordion 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.: accordion und accordion_links. 

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

Änderungen in accordion.php

In Zeile 114 wird der Beitragstext geladen:

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

Hier folgende Änderung einfügen:

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

Der Tag 'h4' muss der gewählten Accordion Ü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 accordion.php am Ende:

<script type="text/javascript">
(function($) {
$(window).load(function(){
if ( $('.accordion-end').length == 0){
$('#accordion h4').each(function(index, element){
$(this).addClass('closed').nextUntil('h4').wrapAll('<div id="collapse'+index+'" class="panel-collapse"></div>');
});
}
else{
$('#accordion h4:not(:last-of-type').each(function(index, element){
$(this).addClass('closed').nextUntil('h4').wrapAll('<div id="collapse'+index+'" class="panel-collapse"></div>');
});
$('#accordion h4:last-of-type').addClass('closed').nextUntil('.accordion-end').wrapAll('<div id="collapse'+index+'" class="panel-collapse"></div>');
}
$('#accordion 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)
</script>

Beispiel CSS:

/* accordion */
#accordion 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;}
#accordion h4:before{content:'+ ';}

Accordion Ende

Um Inhalte nach dem Accordion einzufügen, wird dem ersten HTML Element, das ausserhalb des Accordions liegen soll, die Klasse 'accordeon-end' zugewiesen 

Kommentare  

+1 #1 Bernhard 2016-11-08 15:06
Danke für den schönen Artikel! Funktioniert auch wunderbar. Mein Problem ist, dass dies zwar funktioniert wenn der Artikel angezeigt wird, jedoch nicht im Einleitungstext des Artikels (Stichwort: Readmore). Die Situation stellt sich wie folgt dar: Einem Menüpunkt ist der Menüeintragstyp Kategorieblog zugeordnet. Dort werden alle Artikel in einer Listenansicht untereinander dargestellt. Keiner der Artikel hat einen Weiterlesen Link. Daher funktioniert auch in dieser Ansicht das Akkordeon nicht. Rufe ich den Beitrag "direkt" auf funktioniert auch das Akkordeon. Ich habe leider im Template nicht die richtige Stelle gefunden, in der ich den Code einbinden muss, damit das funktioniert. Es wäre sehr nett wenn Sie mir helfen könnten. Vielen Dank! Bernhard Blech
Zitieren
0 #2 Gerno 2016-11-15 10:52
Hi Berhard, für deinen Zweck muss die Ansicht 'Kategorie Blog' überschrieben werden. Weil dann mehrere Accordions auf einer Seite dargestellt werden, habe ich das JQuery Script abgewandelt. In der Live Demo steht genau wie es geht und auch das Script:
http://go-lux.de/one-page
Menu Eintrag 'Accordion im Einleitugstext'.
Gutes Gelingen wünscht Gerno!
Zitieren
0 #3 Stephan 2016-12-27 19:19
Hallo und vielen Dank für den Override. Leider hat sich da wohl ein kleiner Fehler eingeschlichen, zumindest dann, wenn man nach dem Accordion noch weiteren Content eingeben möchte. Wenn ich nach dem vierten z. B. eingebe, funktioniert die Ein- und Aufklappfunktio n nicht mehr. Was mache ich falsch? Ware lieb, wenn Sie mir da einmal behilflich sein könnten. Lieben Gruß Stephan
Zitieren
0 #4 Gerno 2016-12-30 17:47
@Stephan,
merci für den Hinweis!
Da war tatsächlich ein Tipfehler drin, jetzt ist der Teil der Anleitung für Content nach dem Accordion wieder sichtbar:
Accordion Ende
Um Inhalte nach dem Accordion einzufügen, wird dem ersten HTML Element, das ausserhalb des Accordions liegen soll, die Klasse 'accordeon-end' zugewiesen
Zitieren
0 #5 Rippchen 2017-05-31 15:45
Hi,

ich würde gerne die erste Ebene des Akkordeons beim Aufrufern der Seite aufgeklappt haben.

Wäre dies möglich und wie?

Vielen Dank für die Hilfe.
Zitieren
FacebookTwitterDiggGoogle BookmarksTechnoratiLinkedin