Accordion Form

[lori19]

Hi all

I'm trying to setup my form so that the groups show in an accordion style.

Following this wiki entry, I assumed the js has now to go into media/com_fabrik/js

There is some contradiction in the wiki on how to call the js, form_xy.js or xy.js whereby xy stand for the form-id. (see here).
Both possibilities don't seem to work.

Any suggestions?

Thanks
Lorenz

 

[achartier]

I don't belive we changed any of that. Did you try placing it into components/com_fabrik/js ? Looking at the code this is where it should live and you can use either naming convention form_x.js or x.js. If both exist for the same form the x.js is used.

 

[lori19]

Thanks, the js is now loading.

However, I get a script error:
TypeError: null is not an object (evaluating 'd.setStyles')

pointing to mootolls-more.js​

specifically the line

d.setStyles({ "padding-top": 0, "border-top": "none", "padding-bottom": 0, "border-bottom": "none" });​

Using J4.4 and F4Zeta on a local MAMP (=XAMP) installation..


Lorenz

 

[achartier]

Do you have the full call stack from the js error? I expect this is likely due to a markup change with BS5.

 

[lori19]

Do you mean this one?

 

[troester]

The WIKI entry is about 10 years old and pointing to Fabrik3.0 (i.e. before any Bootstrap times).

Meanwhile there's the bootstrap_tabs template, doesn't it do what you are looking for?

Anyway:
If you want to do it on yourself I assume you must adapt the selectors in the example code, use your browser dev tools to examine.
Something like (I didn't test)
var elements = document.getElements('fieldset > div, fieldset > .fabrikSubGroup');

 

[lori19]

Thanks for pointing me in the right direction!
I have not much experience with javascript, but I figured it out:

• The fieldset > div selector does not really work, as mootools only takes the first div (= the first element) as content for the accordion. When you click the second handle, it will hide the first element and show the second one.. It seems, mootools can not aggregate all div tags within a <fieldset> into one of its content sections.
• The class fabrikSubGroup does not appear anymore.
• Yes, I checked out the bootstrap_tabs template but I don't like the tabs layout, I'd prefer to have accordion-style layout from the beginning (also easier for mobile users).

Solution:
One needs to create a template override for view/form/tmpl/bootstrap/default.php and add a <div class="fabrikSubGroup"> after line 82. This is after the group intro, supposing that you want to show it in the closed accordion sections. If not you need to insert the div after line 77.
Dont forget to close the div in line 100 before the </fieldset>

Kindly,
Lorenz

 

[troester]

Better don't take as class "fabrikSubGroup", it may have side effects because it is used for repeat groups etc.

Instead of creating a template override you can create a custom template, starting with a copy of bootstrap.

 

[lori19]

Hi there

@troester: Thanks for the tips, implemented both.

I saw that bootstrap also offers a collapse feature with which you can build an accordion. So I tried this one too (see below). It requires to load an update jQuery library and the animation is a bit clunkier.

So here are the two solutions, if anybody wants to pick them up/continue:

1. JS File

Place the following js file in the js folder as explained in the Fabrik wiki or above:

window.addEvent('domready', function() {
    var handles = document.getElements('legend');
    var elements = document.getElements('.FabrikAccordion');
    var AccordionObject = new Fx.Accordion(handles ,elements);
});

Then duplicate your bootstrap folder in the form/details tmpl and add

<div class="FabrikAccordion">

after the endif of the group-intro.
Close the div before the </fieldset>

2. Bootstrap Accordion

This also needs a new template and some recoding of the default.php for the form and details views. Here are the two files:

Kindly,
Lorenz

 

[troester]

Great, thanks for sharing.