JSFiddle - React, Tailwind, and code Playground

by Pedro Cruz

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
 <div class="custom-tabs-left" id="tabsTopPrograms"><div class="btn-group btnliketabs col-sm-2 hidden-xs" style="text-transform: uppercase;" data-toggle="buttons"><label title="row_0" class="btn btn-primary active" value="0"><input type="checkbox">All Channels</label><label class=" btn btn-primary" title="row_1" value="1"><input type="checkbox">RTP1</label><label class=" btn btn-primary" title="row_2" value="2"><input type="checkbox">RTP2</label><label class=" btn btn-primary" title="row_3" value="3"><input type="checkbox">SIC</label><label class=" btn btn-primary" title="row_4" value="4"><input type="checkbox">TVI</label></div><div class="hidden-lg hidden-md hidden-sm"><select id="selectForMobile" name="selectForMobile[]" class="multiselect" multiple="multiple" style="display: none;"><option value="1">RTP1</option><option value="2">RTP2</option><option value="3">SIC</option><option value="4">TVI</option></select><div class="btn-group"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected">None selected <b class="caret"></b></button><ul class="multiselect-container dropdown-menu" style="max-height: 300px; overflow-y: auto; overflow-x: hidden;"><li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="1"> RTP1</label></a></li><li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="2"> RTP2</label></a></li><li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="3"> SIC</label></a></li><li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="4"> TVI</label></a></li></ul></div></div><div class="tab-content clearfix col-sm-offset-2"><div class="tab-pane...

JavaScript

$('.btnliketabs > label').on('click', function(idx, val){
	var self = $(this);
	var tablerow = $('#TableTopPrograms-reportMMI > tbody > tr');
	var activeElems = $(".btnliketabs > label.active");
	if(activeElems.length === 0){
	  $(".btnliketabs > label").addClass("active");
	  $(tablerow).show();
	}else{
	  $(".btnliketabs > label").removeClass("active");
	}
	
	if(self.hasClass("active")){
	    self.removeClass("active");
	}else{
	    self.addClass("active");
	}
	tablerow.hide();
	 filterActiveProducts();
	});

	function filterActiveProducts(){
	  $(".btnliketabs label.active").each(function(){
	      var category = $(this).attr("value");
	      if(category === '0'){
		      $("#TableTopPrograms-reportMMI > tbody > tr").show();
	      }else{
		  if($(".btnliketabs > label.active").attr('value') === '0'){
		       $(".btnliketabs > label").addClass("active");
		  }
		      $(".row_" + category).show();
	      }
	  });
	}