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 

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
0 #6 SoHo 2018-07-27 15:55
Hallo, Danke für die gute Anleitung. Leider habe ich noch Problem mit dem Ende des Accordions. Es funktioniert weder die Klasse "accordeon-end" noch die auf dieser Seite verwendete "akkordeon-end".
Die Sliderfunktion wird dadurch zwar nicht beeinträchtigt, Das Accordion endet aber leider auch nicht. Wie habt ihr das gelöst?
Danke für Feedback
SoHo
Zitieren
0 #7 Gerno 2018-07-28 12:32
Hi SoHo, danke für den Hinweis, im JQuery Script war tatsächlich ein Tipfehler! Dort das 'akkordion-end' gegen 'akkordeon-end' tauschen und schon läufts!
Zitieren
0 #8 SoHo 2018-07-28 12:57
Hallo Greno,
danke für die schnelle Antwort!
Leider hat das auch nicht funktioniert. Ich habe in der accordion.php "akkordion-end" gegen "akkordeon-end" getauscht und im Beitrag die Klasse akkordeon-end zugewiesen - . Der Slider funktioniert dann leider gar nicht mehr. Wenn ich die Klasse wieder entferne, ist alles gut, nur das Slider-Ende funktioniert natürlich dann auch nicht.
LG
SoHo
Zitieren
0 #9 Gerno 2018-07-28 12:59
Hi Rippchen,
dazu bitte eine Zeile in das JQuery Script hinzufügen, fast am Ende nach:
else{ $(this).addClas s('closed').rem oveClass('opene d').next('.pane l-collapse').sl ideToggle('slow ', function(){});
}
})
neu:
$('#akkordeon h4:first-of-typ e').toggleClass ('closed opened').next(' .panel-collapse ').slideToggle( 'slow', function(){});
Ist auch im Script hier hinzugefügt!

zitiere Rippchen:
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
0 #10 SoHo 2018-07-28 13:25
vielen Dank für die Hilfe, nun klappt alles.
Zitieren

Go-Lux.de verwendet Cookies.

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

OK