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

Home Forums CSS Toggle Bootstrap Buttons on Click

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #262581

    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


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


    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>

    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');
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.