Categories
CSS

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

Spread the love

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

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

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

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

For instance, we 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 when the collapsed is open with

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

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

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

Conclusion

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

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.