How to change display of toggle button with Twitter Bootstrap collapse?

Sometimes, we want to change display of toggle button with Twitter Bootstrap collapse.

We’ll look at, how to change display of toggle button with Twitter Bootstrap collapse, in this article.

How to change display of toggle button with Twitter Bootstrap collapse?

With Twitter Bootstrap collapse, we can add our own CSS styles, to change display of toggle button.

For instance, we can write

<a
  class="btn btn-primary collapsed"
  data-toggle="collapse"
  href="#collapseExample"
>
  <!--You can put any valid html inside these!-->
  <span class="if-collapsed">Open</span>
  <span class="if-not-collapsed">Close</span>
</a>
<div class="collapse" id="collapseExample">
  <div class="well">...</div>
</div>

to add the collapse elements.

Then we write

[data-toggle="collapse"].collapsed .if-not-collapsed {
  display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
  display: none;
}

to hide the button when the collapsed is open with

[data-toggle="collapse"].collapsed .if-not-collapsed {
  display: none;
}

And when it’s closed, we hide the collapse container with

[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
  display: none;
}

Conclusion

With the help of Twitter Bootstrap collapse, we can add our own CSS styles, to change display of toggle button.