I am trying to put indicators like text with Open or close or arrows up and down inside a “head” element to show state of the collapse container “body” below it, but cannot find a way though toggle classes or using the show/hide state(dynamic attr) of the collapse container.
Seems like that option is not available yet? Or is there a way to do it otherwise?
Hi @pixlapps,
It’s actaully easy to do this. When collapsed the header element has a class of “.collapsed”.
So inside it add the two elements to show/hide elements and add them some custom classes like - “.panel-open” and “.panel-closed”:
<button class="btn"><span class="panel-open">Close</span> <span class="panel-closed">Open</span></button>
And then in your css:
.panel-open{ display: none; }
.panel-closed{ display: inline-block; }
.collapsed .panel-open { display: inline-block; }
.collapsed .panel-closed{ display: none; }
This will change the text depending on the collapse element state.
@Teodor Thanks tried this but my header definately does not have the .collapsed class. I can see “collapse show” for the body in inspector but nothing happening on my “clicked” element. Example code:
<div class="card-header profile-header white" dmx-on:click="collapse2.toggle()">
Bidding History
<button class="btn pull-right">
<span class="panel-open">Close</span>
<span class="panel-closed">Open</span>
</button>
</div>
<div class="collapse" id="collapse2" is="dmx-bs4-collapse">
<div class="card-body card-profile">
<div class="container-fluid">
</div>
</div>
</div>It will get the collapsed class if you use the action toggle options instead of dynamic events:
Great. Just what I needed at this stage. Thanks both of you