Toggle Bootstrap Buttons on Click

[Historical Forums User]

I’ve got a bootstrap panel that toggles between two panes. How do I also toggle the button classes as well?

Here is a codepen
https://codepen.io/aaron4osu/pen/NwvVgN

[Historical Forums User]

any ideas on how to toggle the button colors on click?

[JeroenR]

I think, because you use bootstrap, you should use the correct elements for that, where the toggling of the active class is handled by bootstrap.
So something like this instead of your button group:

<ul class="nav nav-tabs">
  <li class="active"><button class="btn btn-default" data-toggle="tab" data-target="#gallery-carousel">Carousel</button></li>
  <li><button class="btn btn-default" data-toggle="tab" data-target="#gallery-thumbs">Gallery</button></li>
</ul> 

Then you can add the active button styling to your CSS file.

You can also leave it like this, but than you’ll have to add some javascript lines to toggle the classes yourself.
You’re using the btn-info and btn-default for the different background color, so these classes should be toggled then.
That could be something like this:

$('.btn').on('click', function () {
  $(this).parent().find('.btn').toggleClass('btn-info btn-default');
});

[Author]

Posts