<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="light row"> <div class="lights redlight col-md-1"></div> <div class="lights orangelight col-md-1"></div> <div class="lights greenlight col-md-1"></div> </div> </div>

/*! Light */ .light { background-color: whitesmoke; box-shadow: 0 0 5px rgba(0,0,0, .8); overflow: hidden; padding: 0 0 4px; width: 140px; } .light div { border-radius: 50px; display: block; height: 30px; margin: 4px auto 0; opacity: .1; width: 30px; padding-left: 30px; } /*! Light colours */ .redlight { background-color: red; } .orangelight { background-color: orange; } .greenlight { background-color: green; } /*! Active states */ .light div.active { opacity: 1; } .light .redlight.active { box-shadow: 0 0 10px red; background-color: red; } .light .orangelight.active { box-shadow: 0 0 10px orange; background-color: orange; } .light .greenlight.active { box-shadow: 0 0 10px green; background-color: green; }

$(document).ready(function () { $('.light div').on('click', function () { $(".lights").removeClass('active'); $(this).addClass("active"); }); });