DMXzone Bootstrap 3 Components Support Product Page

Not a problem

poor support for databindings and accordion module

Reported 22 Jan 2016 08:12:07
1
has this problem
22 Jan 2016 08:12:07 Greta Garberini posted:
Hi,
I used the built-in component accordion.

(I also bought accordion2 extension but did not like the combination of the built-in layouts which somehow look too heavy for a page built with bootstrap)

First thing which hit my eye was: There is no description or checkbox to use accordion with databindings. Since all extensions are getting optimised for this, I do hope this will be done in an update soon.

It is not too difficult though, to add a Repeat Children Region to the Accordion module. Trouble starts when you want to start with all headers collapsed.

Miro very quickly helped me to solve this: Basically you have to add a unique "id" to the title, like putting {{$index}} to #collapse:

<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{$index}}" aria-expanded="true" aria-controls="collapse">


Then you need to add this to this line

<div id="collapse{{$index}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading">


as well. After this we are almost done. As a non-expert in javascript (which is one of the reasons, I buy dmx-extensions, promising "no need to code", I was led by Miro to remove the "in" part in line

<div id="collapse{{$index}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading">
(away with it).

I hope this helps someone if running into the same issue here. As mentioned, accordion2 solves this problems with two checkboxes, even with dynamic content using databindings.

Replies

Replied 22 Jan 2016 08:18:08
22 Jan 2016 08:18:08 Teodor Kuduschiev replied:
Hello,
This is indeed how the accordion is supposed to work with data bindings, and there is nothing wrong here. As for the all-collapsed option - we will add this option in the next update.
Replied 22 Jan 2016 08:25:07
22 Jan 2016 08:25:07 Greta Garberini replied:
Ok, I did not say, there was something wrong. The option of "collapse all" is very necessary on complex pages, though. I just liked the "checkbox-version" of accordion2 and missed it here. There is also no description in the manual.
It is built in at "Tooltip Properties" and "Popover Properties" - missing in "Modal", "Tabs" and "Accordion".

Glad to read it will be added soon.
Replied 07 Jun 2016 14:21:04
07 Jun 2016 14:21:04 David Woolley replied:
I managed to get the Bootstrap accordion working with data bindings by following the Group By video:
www.dmxzone.com/go/22131/using-the-group-by-filter-in-html5-data-bindings-formatter
then plugged the 2 repeat regions into the one-panel accordion. Works well, but I need to have the accordion panels all closed, or top panel open & rest closed. I tried changing this line:
<div id="collapse" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading">

to
<div id="collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading">

but only the top panel collapses & expands.

When can we expect the Components update with the all-collapsed option?
Will this be able to work when using a repeat region in the accordion with one panel?
Replied 09 Jun 2016 07:44:57
09 Jun 2016 07:44:57 David Woolley replied:
For the record, I'm now using Accordion 2 for the scenario above rather than the Bootstrap component accordion, and all working fine. The Blitzer skin is the closest I can get to the style of the Bootstrap accordion.
Dave

Reply to this topic