Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Toggle Bootstrap Buttons on Click Reply To: Toggle Bootstrap Buttons on Click

#264268
JeroenR
Participant

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');
});