Thanks Brian, but that did not make any difference to this particular issue.
Here is a recap of the 2 issues I have found.
-
Create a new php page, save it, add a container > row > column > accordion cards, the head .js is not added of
<script src="/dmxAppConnect/dmxBootstrap4Collapse/dmxBootstrap4Collapse.js" defer=""></script> -
If you alter your code to try make dynamic accordions like this code
<div class="accordion" id="accordion1" is="dmx-repeat" dmx-bind:repeat="3">
<div class="card">
<div class="card-header" dmx-bind:id="'accordion1_headingOne'+$index">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" dmx-bind:data-target="'#accordion1_collapseOne'+$index" dmx-bind:aria-expanded="$index == 1 ? true : false" dmx-bind:aria-controls="'accordion1_collapseOne'+$index" dmx-class:collapsed="$index != 1">
Collapsible Group Item {{$index}}
</button>
</h5>
</div>
<div dmx-bind:id="'accordion1_collapseOne'+$index" class="collapse" is="dmx-bs4-collapse" dmx-bind:aria-labelledby="'accordion1_headingOne'+$index" data-parent="#accordion1" dmx-bind:show="$index == 1">
<div class="card-body">
Anim pariatur ... wolf
moon ... excepteur
butcher vice ... haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
And open your developer tools to watch the classes change as different accordions are opened and closed, you will notice that the button classes do not change as they are meant to.
Here is a gif on what it should be doing before making things dynamic, gif credits @Teodor, haha, thanks
