However the above code does not work, and using developer tools, it looks like the reason why is that the dmx-bind:id="accordion1_collapseOne{{$index}}" attribute for the card body is not parsing the {{$index}}. If I remove the is="dmx-bs4-collapse" then it all works as expected, however I am not sure what functionality I may lose by removing that attribute. Can anyone confirm if removing that is safe to do to get around this or if its a bug I should wait for a fix on.
UPDATE: figured out the problem, the above code does work perfectly including the parsing of {{$index}} however I had to manually add a reference to <script src="/dmxAppConnect/dmxBootstrap4Collapse/dmxBootstrap4Collapse.js" defer=""></script> in the document head as it is not auto adding when i add an accordion component to my blank page.
A secondary issue I have found with the accordion is, if I add the standard accordion component through Wappler without adjusting code to make it dynamic then when i click a button to show or hide the content, certain classes are added as follows.
The button itself on click to collapse gets a new class of collapsed and aria-expanded toggles between true/false however when using the code above with the head js included, the button stops getting the new classes and aria-expanded changes.
Again, this can be fixed if I remove the is="dmx-bs4-collapse", so as far as I can tell it is still a bug.
These classes and aria attributes not changing do not stop the component from working however if you are needing to use the added class to show different content dependent on open or closed states in the button area, such as a caret icon to denote open vs closed, then it becomes very difficult.
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
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
@JonL I know you are online, do you feel like taking a crack at this issue I am having to see if you can find a way around it, 3 days later and i am spinning wheels.
Absolutely brilliant, thanks so much Jon, that will perfectly get me around this issue without needing to concern myself with the classes not toggling.
I would have never imagined going about it with your solution, no wonder I wasnt getting it working, haha. Thanks again, really appreciate the time taken.
I am going to make 2 new different bug reports for the actual bugs that still exist so the Team know there is an issue for future fix but at least this gets me around the problem for now, and opens up some new possibilities for me, so this has really been useful, as I had no clue I could target one element from the class change of another element like that, brilliant.
BTW, one thing I forgot. That use of a double dmx-class attribute is not supported by Wappler’s UI. If you dare to open the element in the DOM inspector it will kindly delete the second dmx-class for you
Also you can’t code them manually with the DOM inspector open as the UI checks won’t stop deleting it.
I assume also that if were an AC element you would also have to avoid selecting the element in the AC panel too.
Good to know, although to be honest I rarely use the dom inspector for everyday elements as I find the DOM often does not support some of the stranger things I tend to do, so most of the time I just fill in the missing parts I want in code view.
Out of interest, if you are using a mac, did your test page auto add the <script src="/dmxAppConnect/dmxBootstrap4Collapse/dmxBootstrap4Collapse.js" defer=""></script> to the head at all.
I already noticed you implemented the work around.
You should check font size on small screens or change the height of the header to accommodate the text. I would probably go for the second option as I like the font chosen and the size But maybe it doesn’t look so good.
Anyway just wanted to mention it to you. Although you probably are aware.
Here you are. As you can see the UI doesn’t show both elements correctly and also corrects the html code by removing one class. This only happens in DOM panel.
All in all, you can’t add two class changes from the UI. Once you add one, you can’t add a second one.
This happens with other attributes also where you can add only a single item and not multiple that will trigger depending on different conditions.
Maybe it’s worth doing a pass to all the elements and checking if they are allowed to be set dynamically multiple times.
I correct myself then.
It doesn’t happen in the AC panel. Just in the DOM panel.
I never paid too much attention as I would just add them in the code.
