jquery - bootstrap JS and data-toggle="buttons-checkbox" showing divs -

i'm trying toggle divs using bootstrap (data-toggle="buttons-checkbox") see code:

<div class="btn-group d1" data-toggle="buttons-checkbox">     <button type="button" class="btn btn-link ra">a</button>     <button type="button" class="btn btn-link rb">b</button>     <button type="button" class="btn btn-link rc">c</button> </div>  <div class="mydiv rad">aaaaaaaaaaaa<br />aaaaaaaaaaaa</div> <div class="mydiv rbd">bbbbbbbbbbbb<br />bbbbbbbbbbbb</div> <div class="mydiv rcd">cccccccccccc<br />cccccccccccc</div>  $(".ra").on("click",function(){     $('.mydiv').toggle();     $(".rad").toggle(); });  $(".rb").on("click",function(){     $('.mydiv').toggle();     $(".rbd").toggle(); });  $(".rc").on("click",function(){     $('.mydiv').toggle();     $(".rcd").toggle(); }); 

see working link jsfiddle

any idea how display base on choose ? 2 divs in same time ?

iterate on buttons, find "active" , show elements correspond "active" elements, others hide. if nothing "active" show everything.

http://jsfiddle.net/mattydsw/kzbnh/3/

var buttons = $(".btn-link"); buttons.on("click",function(){     $(this).toggleclass('sel');     buttons.each(function(i,e) {         var $this = $(e);         var current = $("."+($this.attr('class').split(' '))[2]+"d");         if($this.hasclass('sel')) {             current.show();         } else {             current.hide();         }     });     if($('.sel').length==0) {         $('.mydiv').show();     } });