Can I change button text based on bootstrap collapsed status?

[schwim]

Hi there everyone!

I’ve got a collapsible form for sorting some items and I’d like to make the button more useful in explaining what it does. I’d like it to change the text to something like “Hide this form” when the div is expanded. Is this something that’s possible while continuing to use the bootstrap style-div?

The button in question is labeled “Change What I See”.

https://wheeltastic.com/product/light_bars

Thanks for your time!

[PaulOB]

You could do something like this:

<button type="submit" data-toggle="collapse" data-target="#filter-container" class="btn-text collapsed"><span>Show this form</span><b>Hide this form</b></button>

I added a class to the button and then wrapped some tags around the words inside the button so that they can be toggled on and off.

And then toggle with css using the collapsed class that bootstrap is already adding:

.btn-text b{display:inline}
.btn-text:not(.collapsed)  span{display:none}
.btn-text.collapsed b {display:none}