App Connect Bootstrap 4 Collapse

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:
Screenshot_75

1 Like

Great. Just what I needed at this stage. Thanks both of you