jQuery toggle through Twitter Bootstrap button classes

Question

Scenario

I would like the user to be able to toggle through the Twitter Bootstrap button classes using jQuery when the main part of the button is clicked (for quickness).

Or

Allow the user to select a state from the drop down menu.

Whatever the state selected, the whole btn-group should have the same button class.

Not Started (btn-info), In Progress (btn-warning), Completed (btn-success) and Late (btn-error).

What I would like

Buttons

What I have so far

This is my HTML code. It is standard Bootstrap button group.

<div class="btn-group">
    <button type="button" class="btn btn-warning">Week 7</button>
    <button type="button" class="btn btn-warning dropdown-toggle"
      data-toggle="dropdown" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
          <a href="#">Not Started</a>
        </li>
        <li>
          <a href="#">In Progress</a>
        </li>
        <li>
          <a href="#">Completed</a>
        </li>
        <li class="divider"></li>
        <li>
          <a href="#">Late</a>
        </li>
    </ul>
</div>

This toggles all of the buttons, not just the button that is clicked.

$('.btn-group').click(function () {
  var classes = ['btn btn-info','btn btn-info','btn btn-success'];
  $('.btn').each(function(){
    this.className = classes[($.inArray(this.className, classes)+1)%classes.length];
  });
});

Alex Alex · Accepted Answer · 2015-01-05T20:56:28

Without changing your HTML you could use the following JavaScript code:

//// TOGGLE ////
// toggle only if the first part of the button (button:first-child) is clicked
$('button:first-child').click(function () {

    var classes = ['btn btn-info','btn btn-warning','btn btn-success','btn btn-danger'],

        // select new class name first so it isn't changed on every iteration (if you use each)
        oldClass = this.className,
        newClass = classes[($.inArray(oldClass, classes)+1)%classes.length];

    // this method keeps all other classes untouched (e.g. dropdown-toogle)
    $([this, this.nextElementSibling])
        .removeClass(oldClass)
        .addClass(newClass);
});

//// SELECT ////
// add a click listener to every a element
$(".btn-group").each(function () {
    var classes = ['btn-info','btn-warning','btn-success','btn-danger'],
        buttons = $(this).children("button");

    $(this).find("a").each(function (index) {

        $(this).click(function () {

            // use the a elements index to get the right array element
            var newClass = classes[index];

            $(buttons)
                .removeClass(classes.join(' '))
                .addClass(newClass);
        });
    });
});

Also see the live demo here: http://jsfiddle.net/b9e3ossu/1/

I hope that helps :).

jQuery toggle through Twitter Bootstrap button classes

1 Answers