Toggle button text with collapse

Wappler General Need Help
1

How do I toggle the test of a button based on the shown state of a collapse. I have tried setValue when shown but that did not work. What I am trying to accomplish is a Read more…, Read Less… Button.

2

If this is the code for the collapse

<button class="btn collapsed btn-primary btn-sm" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"></button>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Then the CSS would look like

button.btn.collapsed:before
{
  content:'More...' ;
  display:block;
  width:45px;
}
button.btn:before
{
  content:'Less...' ;
  display:block;
  width:45px;
}
1 Like