bootstrap3 button select groups

bootstrap3 button select groups

by Andrew Pougher

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="box btn-group">
    <button data-filter="a" id="a" name="button" type="button" class="btn">A</button>
    <button data-filter="b" id="b" name="button" type="button" class="btn">B</button>
        <button data-filter="c" id="c" name="button" type="button" class="btn">C</button>
        <button data-filter="d" id="d" name="button" type="button" class="btn">D</button>
        <button data-filter="e" id="e" name="button" type="button" class="btn">E</button>
        <button data-filter="f" id="f" name="button" type="button" class="btn">F</button>
</div>

<div class="result"></div>

CSS

.red{background:red}

JavaScript

$(".box").on('click', '.btn', function(){
    $(this).button("toggle").toggleClass("red");
  $(".result").html($(this).attr("id") + " is " + ($(".btn").hasClass("active") ? "active" : "not active"));
      $(".result").html($(this).attr("id") + " is " + ($(".btn").hasClass("active") ? "active" : "not active"));
});