Can App Connect be used with Accordion 2 dynamically?
I've got the accordion working with an App Connect repeat and the appropriate data bindings.
However the accordion panels do not collapse - all panels stay open, even though I've checked 'Collapsible' & 'Initially collapsed" in the Accordion properties.

Yes, you can do this, but the accordion panels IDs must be set to dynamic, using App Connect and also the panels headers which open them must be dynamic.

To add a dynamic ID just add:

dmx-bind:id="binding"

This is how I tried to set it up - just added: dmx-bind:id="$key"

<div class="dmxAccordion" id="dmxAccordion1" dmx-repeat:repmorph="SC_CaseMorph.data.qryCaseMorph.groupBy(`morphology`)" dmx-bind:id="$key">
     [h3]{{$key}}&nbsp;&nbsp;(<em>{{$value.count()}}&nbsp;cases</em>)[/h3]
<div>

What about id="dmxAccordion1" ? I tried to remove this but javascript errors!
How does the jQuery script target the dynamic ID?

Should this be changed:
jQuery("#dmxAccordion1"

Any suggestions please?

You should not repeat the whole accordion, you need to repeat its contents (repeat-children).

I'm not sure how to change the code above to repeat-children. I could not find any info on your site on how to do this.

The accordion panel contents also have a repeat region with images and text - this works fine.

The only issue I have is that the accordion panels do not expand or contract.

I followed this video tutorial: www.dmxzone.com/go/32971/using-the-group-by-filter
then extended it to fit to an accordion. This video uses 2 repeat regions - not repeat-children

It would be great if you could help with this.

I am not sure i understand what exactly do you want to do?
Do you want to repeat accordion content or what?

My point is you must NOT repeat the whole accordion as you are doing now - repeat its content!

I'll try and muddle on myself - I have the accordion working perfectly on the existing site using HTML5 Data Bindings.
Upgrading the site to use App Connect is causing me major headaches - I would have expected a bit more help, especially after investing so heavily in DMXzone extensions!!
I can show you the existing page on the site so you can see what I'm trying to do. I just need to make it work with App Connect!
Is that too much to ask?

I already explained you what you are doing wrong.
You are repeating the whole accordion structure, which is wrong. You must repeat only the sections inside it. Here is what i mean:

WRONG:
<accordion repeat>
<section></section>
</accordion>

RIGHT:
<accordion repeat children>
<section></section>
</accordion>

ALSO RIGHT:
<accordion>
<section repeat></section>
</accordion>

I hope this explains the logic well.

I've now changed the <accordion repeat> to <accordion repeat children> so that the accordion content is repeated, not the accordion itself.
(I can see from Firebug that is now only repeating the content)

However I still have the opening/closing problem - it does not make any difference whether I use repeat children or not..

Accordion Collapsible ON : all panels CLOSED and won't EXPAND
Accordion Collapsible OFF: all panels OPEN and won't COLLAPSE

I see that somebody else posted the same question a year ago, but he did not get an answer:
www.dmxzone.com/support/32763/topic/61928

Another thing:
The dynamic accordion works properly on the existing page using HTML5 Data Bindings whether I use Self Repeat or Repeat Children on the accordion - just checked this!

Please provide a link to your page where I can see both versions and why is it not working...

Hi Teodor - I've finally put a testing folder on the site where you can view the problem.

Here is a page that I've selected where you can view the OPEN accordion using App Connect:
digitalpathology.uct.ac.za/trials_ac/topog_morph_cases_ac_groupby.php?topography_id=37&system_id=7

Here is the same public page where you can see the accordion working properly (using HTML5 Data Bindings):
digitalpathology.uct.ac.za/topog_morph_cases.php?topography_id=37&system_id=7

Well you have not added unique IDs to accordion panels - this way the accordion doens't know which one to expand or collapse: prntscr.com/l9shml

I put <div dmx-bind:id="$key"> but no change at all.
When I inspect in Firebug, the id's are showing correctly on this div.
e.g. <div id="Degenerative" .... >
<div id="Mechanical" .... >

Take a look - I've uploaded this change.

How come the dynamic accordion on the actual public site does not need a unique id on this div?

This reply was removed on 10/24/2018 11:23:31 AM.
See the changelog

I will check your page later today, hard to tell what you are doing wrong by just looking at the code.

Hello David,

I made some local tests and your app connect code is just right (i.e. you don't need unique id there).
The issue is caused by the way jquery accordion and app connect function. There is a difference between when the app connect data is rendered, and when the plugin is rendered which leaves accordion kind of not-rendered on the page, that is why it does not function currently.

You can fix this by removing the script block:

       <script type="text/javascript">
  // <![CDATA[
 jQuery(document).ready(
   function()
     {
       jQuery("#dmxAccordion1").dmxAccordion(
         {"heightStyle": "content"}
       );
     }
 );
  // ]]>
        </script>

And add this to your repeat children region:

onupdated="jQuery("#dmxAccordion1").dmxAccordion({"heightStyle": "content"});"

So your repeat children region will look like:

<div class="dmxAccordion" id="dmxAccordion1" is="dmx-repeat" dmx-bind:repeat="SC_CaseMorph.data.qryCaseMorph.groupBy(`morphology`)" onupdated="jQuery(&quot;#dmxAccordion1&quot;).dmxAccordion({&quot;heightStyle&quot;: &quot;content&quot;});" >

This will make your accordion work with app connect.
Unfortunately it is an old and jquery based plugin, and we dropped jquery since we released app connect - as it is bloated and heavy library.

Thanks a 100 times Teodor!

I added: &quot;collapsible&quot;: true,
to the onupdated line

Now it is displaying the accordion all closed - perfect!

Are you planning an App Connect Accordion in the near future?

Cheers
Dave

There is an accordion for app connect, but it is Bootstrap 4 based: www.dmxzone.com/go/33240/app-connect-bootstrap-4-collapse

Thanks Teodor - that's what I need.
And the BS4 Modal as well - I've been trying to use the BS3 modal with App Connect on the site, but having issues with this.
Roll on Black Friday ... !
Cheers
Dave