We want to create an accordion container in ChronoForms V5 in Joomla that can be used to hide long texts and expand them when needed — in the ChronoForms context, essentially a slider. There are several tutorials explaining how to set this up, and they work reasonably well. In other words, you create a slider_area container and then add slider containers inside it, which can in turn be populated with custom content. So far, so good — however, if you only want to display a single text in an accordion, two problems arise:
First of all: The first slider container is expanded by default, which is controlled by the "in" class. We therefore want to remove this class first, for example by adding an entry to any JavaScript file, which would look something like this:
jQuery( document ).ready(function( $ ) {
$('.gbs3 [id^="slider-"]').removeClass('in');
});
So, after the page and DOM structure have loaded, the "in" class is removed from accordion elements contained within a ChronoForms form.
The second problem is that once the accordion is open, attempting to close it simply causes it to open again. This happens because the logic in the relevant JavaScript file is implemented roughly as follows: when an element inside the slider_area container is clicked, the active class is removed from all sliders within the area and all sliders within the area are closed. The clicked slider is then opened and set to active.
This works correctly whenever you click on an inactive slider. However, when you click on a slider that is already active, the logic first closes it and then immediately opens it again.
We therefore need to distinguish between these two cases. This needs to be handled in the file:
/libraries/cegcore/assets/gplugins/gsliders/gsliders.js
where we need to look for the relevant section and, after the following line
//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
search for and change it to
//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);
}
Now everything works as intended. Tested with Joomla 3.8.3.
