Access collapse(n).collapsed

[AlexandreMoreira]

In the following code, I was able to create a dynamic menu, based on modules and logged in user access, but when trying to control whether or not the bi-chevron-right and bi-chevron-down icons are displayed, I am not being able to access the status of collapsed or not.

thanks for any help!

 <div class="navbar-nav w-100">
 <a class="nav-item mb-2 menu-item" dmx-bind:href="path" dmx-class:selected-menu-item="browser_main.location.pathname==path" dmx-class:shadow- sm="browser_main.location.pathname==path" data-bs-toggle="collapse" dmx-bind:data-bs-target="#collapse{{IDModulo}}">
 <i dmx-bind:class="'fs-5 ' + icon">
 </i>

 <span class="ms-2">{{DEModulo}} <i class="bi-chevron-down ms-2" dmx-hide="collapse{{IDModulo}}.collapsed == true"></i >
 <i class="bi-chevron-right ms-2" dmx-show="collapse{{IDModulo}}.collapsed == true"></i> </span></a>

 </div>
 <div dmx-bind:id="collapse{{IDModulo}}" class="collapse navbar-collapse bg-light py-2 rounded">
 <div class="navbar-nav w-100 flex-column group-sub-items" is="dmx-repeat" id="repeat1" dmx-bind:repeat="scUsuarioLogado.data.acessos.where(`IDModulo` , IDModule, '==')">

 <a class="nav-item mb-2 item-menu" dmx-bind:href="path"><i dmx-bind:class="'fs-8 ' + icon">
 </i>{{DEAccess}}</a>
 </div>
 </div>
 </nav>

[famousmag]

maybe because is="dmx-bs5-collapse" is missing from the collapse?

<div dmx-bind:id="collapse{{IDModulo}}" class="collapse navbar-collapse bg-light py-2 rounded" is="dmx-bs5-collapse">

[AlexandreMoreira]

tks @famousmag, i put "is" and keep dont access de collapse{{IDModulo}}.collapsed!

[famousmag]

[AlexandreMoreira]

correctly!

<div dmx-bind:id="collapse{{IDModulo}}" class="collapse navbar-collapse bg-light py-2 rounded" is="dmx-bs5-collapse">

but still dont work.

[famousmag]

I did a small test based on your initial code...
The Icon wasn't changing untill I noticed that is="dmx-bs5-collapse" was missing.
When I added it and UPDATED my page it worked fine

[AlexandreMoreira]

yes, when I put values, instead of {{IDModulo}}, still dont worked!

[famousmag]

So, can you check how every collapse is rendered dev elements?
Is IDModulo value attached beside "collapse..." ?

[Apple]

@AlexandreMoreira

collapse{{IDModulo}}

Yes, I also think this syntax is wrong, that's only for HTML content, not for HTML tags

What is "collapse"? Is it an array?
collapse[IDModulo]

Or is it a literal string? Then it should be quoted:
'collapse' + IDModulo

I think this last one above is the right solution

[AlexandreMoreira]

Tks @Apple, but i need get collapse{{IDModulo}}.collapsed to hide or show de icon! When i used without value dinamic, works.

[AlexandreMoreira]

the ids are correctly, but when a try to get the colapse{{IDModulo}}.collapsed always return false!

[AlexandreMoreira]

Even though I try to set the number 1, it still always returns false in both cases for hide and show??

<span> {{collapse1.collapsed}} </span>
                        <span class="ms-2">{{DEModulo}} 
                            <i class="bi-chevron-down ms-2"  dmx-hide="collapse1.collapsed"></i>
                            <i class="bi-chevron-right ms-2" dmx-show="collapse1.collapsed"></i> </span>

[AlexandreMoreira]

Even though I try to set the number 1, it still always returns false in both cases for hide and show??

[famousmag]

Looks correct to me..

But one thing that makes me wonder is that when you just call {{collapse1.collapsed}} always return false

Please check, Is dmxBootstrap5Collapse.js declared in your page?
<script src="/dmxAppConnect/dmxBootstrap5Collapse/dmxBootstrap5Collapse.js" defer></script>

[AlexandreMoreira]

tks @famousmag, it´s correctly! still on hunt! kkk

[AlexandreMoreira]

tks so much @famousmag and @Apple by suport, i finnaly finded the trouble! I cant used de ID dinamics, i changed for fixed ID on the collapse and works fine!

[famousmag]

Can I ask something?

ONLY ONE collapse is going to be rendered each time?

Could you just include each collapse in a ConditionalRegion if="IDModulo==IDModule" and give to all collapses the same id="collapseModulo" (since only one will be rendered there will be no dublicate ids)

This way I think that the collapseModulo.collapse will be clear and unique and return true or false depending on if the only one collapseModulo is collapsed or no

Haven't tried it but I think it could work

[AlexandreMoreira]

I'm rendering all the collapses in a repeat at the same time.

I just saw here that it resolved when I used a hybrid way, sending the fixed ID and another dynamic one, when I leave only the fixed one, all the collapses open.