Access collapse(n).collapsed

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>

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">
1 Like

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

image

1 Like

correctly!

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

but still dont work.

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

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

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

1 Like

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

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

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

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>

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

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>

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

image

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!

1 Like

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

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.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.