Wir wollen in Chronoforms V5 in Joomla einen Akkordeon-Container erstellen, mit dem man lange Texte verstecken und bei Bedarf ausklappen kann, im Chronoforms-Kontext somit einen Slider. Es gibt einige Tutorials, die den Aufbau erklären und auch einigermaßen funktionieren. D.h.: Man baut einen "slider_area"-Container und fügt in diesen dann "slider"-Container ein, die man wiederum mit individuellem Content befüllen kann. Soweit, so gut - wenn man jedoch nur einen einzelnen Text in einem Akkordeon darstellen möchte, ergeben sich 2 Probleme:
Zuerst einmal: Der erste slider-Container ist standardmäßig aufgeklappt, dies geschieht durch die "in"-Klasse. Diese möchten wir daher zuerst entfernen, z.B. mit einem Eintrag in einer beliebigen Javascript-Datei, der in etwa so aussehen müsste:
jQuery( document ).ready(function( $ ) {
$('.gbs3 [id^="slider-"]').removeClass('in');
});
Hier wird also nach dem Laden der Seite / der DOM-Struktur die "in"-Klasse innerhalb von Akkordeon-Elementen, die sich in einem Chronoforms-Formular befinden, entfernt. Zweites Problem: Wenn das Akkordeon einmal offen ist, wird es beim Versuch es zu schließen, immer wieder geöffnet. Dies geschieht daher, dass in der beteiligten Javascriptdatei die Logik in etwa so implementiert ist: Wenn ein Klick auf ein Element innerhalb des slider_area-Containers ausgeführt wird, entferne die Active-Klasse für alle Slider innerhalb der Area und schließe alle Slider innerhalb der Area. Danach öffne den angeklickten Slider und setze diesen aktiv. Das ist auch richtig für alle Fälle, in denen man auf einen nicht aktiven Slider klickt. Klickt man auf einen bereits aktiven Slider, führt das dazu, dass dieser nach der dargestellten Logik eben auch geschlossen und danach wieder geöffnet wird. Also unterscheiden wir diese beiden Fälle, dies müssen wir in der Datei
/libraries/cegcore/assets/gplugins/gsliders/gsliders.js
tun, in der wir nach der Stelle
//activate pane
$(sliders.element).find(sliders.settings.pane_selector).slideUp();
$(sliders.element).find(sliders.settings.pane_selector).removeClass(sliders.settings.active_pane_class);
$(sliders.settings.pane_selector + target).slideDown();
$(sliders.settings.pane_selector + target).addClass(sliders.settings.active_pane
suchen und diese ändern zu
//activate pane
if($(sliders.settings.pane_selector + target).hasClass(sliders.settings.active_pane_class)) {
$(sliders.element).find(sliders.settings.pane_selector).slideUp();
$(sliders.element).find(sliders.settings.pane_selector).removeClass(sliders.settings.active_pane_class);
} else {
$(sliders.element).find(sliders.settings.pane_selector).slideUp();
$(sliders.element).find(sliders.settings.pane_selector).removeClass(sliders.settings.active_pane_class);
$(sliders.settings.pane_selector + target).slideDown();
$(sliders.settings.pane_selector + target).addClass(sliders.settings.active_pane_class);
}
Nun geht alles seinen gewünschten Weg. Getestet in Joomla 3.8.3.
