Stop bubbling on Click outside Div including multiple divs

by Faisal Khan Janjua

HTML

<div class="outerAction tbl2nd">
  <div class="outerFilter" data-column="5">
    <div class="outerFilterBox"><label class="outerFilterText">Select <span>groups</span></label></div>
    <div class="outerFilterContainer">
      <div class="defaultCheckBox"><input type="checkbox" id="tbl2ndotck0" value="Technical Department"><label for="tbl2ndotck0">Technical Department</label></div>
      <div class="defaultCheckBox"><input type="checkbox" id="tbl2ndotck1" value="All Managers of ISB Office"><label for="tbl2ndotck1">All Managers of ISB Office</label></div>
      <div class="defaultCheckBox"><input type="checkbox" id="tbl2ndotck2" value="Admin Workers"><label for="tbl2ndotck2">Admin Workers</label></div>
      <div class="defaultCheckBox"><input type="checkbox" id="tbl2ndotck3" value="Marketing Department"><label for="tbl2ndotck3">Marketing Department</label></div>
    </div>
  </div>
</div>

<div class="outerAction tbl3rd">
  <div class="outerFilter" data-column="3">
    <div class="outerFilterBox"><label class="outerFilterText">Select <span>Position</span></label></div>
    <div class="outerFilterContainer">
      <div class="defaultCheckBox"><input type="checkbox" id="tbl3rdotck28" value="Director"><label for="tbl3rdotck28">Director</label></div>
      <div class="defaultCheckBox"><input type="checkbox" id="tbl3rdotck29" value="Support Engineer"><label for="tbl3rdotck29">Support Engineer</label></div>
      <div class="defaultCheckBox"><input type="checkbox" id="tbl3rdotck30" value="Data Coordinator"><label for="tbl3rdotck30">Data Coordinator</label></div>
      <div class="defaultCheckBox"><input type="checkbox" id="tbl3rdotck31" value="Junior Javascript Developer"><label for="tbl3rdotck31">Junior Javascript Developer</label></div>
      <div class="defaultCheckBox"><input type="checkbox" id="tbl3rdotck32" value="Customer Support"><label for="tbl3rdotck32">Customer Support</label></div>
    </div>
  </div>
</div>

CSS

.outerFilter {
  position: relative;
  float: left;
}

.outerFilter .outerFilterBox {
  z-index: 3;
  float: left;
  width: 100%;
  cursor: pointer;
  background: #FFF;
  min-width: 250px;
  padding: 12px 20px;
  border-radius: 5px;
  position: relative;
  padding-right: 60px;
  -o-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  box-sizing: border-box;
  border: 1px solid rgba(224, 225, 229, 1);
}

.outerFilter .outerFilterContainer {
  top: 40px;
  z-index: 2;
  width: 100%;
  display: none;
  padding: 18px;
  background: #FFF;
  border-radius: 5px;
  position: absolute;
  box-sizing: border-box;
  border: 1px solid #eee;
}
.outerFilter.active .outerFilterContainer {
  display: block;
}

.defaultCheckBox {
  display: block;
  padding: 6px 0;
  position: relative;
}

.outerFilter .outerFilterContainer label {
  cursor: pointer;
  -o-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  padding-left: 30px;
  position: relative;
  text-transform: capitalize;
}

.defaultCheckBox input {
  width: 0px !important;
  height: 0px !important;
  opacity: 0;
  z-index: -1;
  position: absolute;
  -o-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

.defaultCheckBox label:before {
  top: 0;
  left: 0;
  bottom: 0;
  content: '';
  width: 22px;
  height: 20px;
  margin: auto;
  position: absolute;
  border: 1px solid #333;
  box-sizing: border-box;
}

.defaultCheckBox input:checked+label:before {
  border: 6px solid #F00;
}

JavaScript

// OuterFilter Check
jQuery(document).on('click', '.outerFilterBox', function(e) {
  e.stopPropagation();
  var currentElement = jQuery(this).next('.outerFilterContainer');
  if (currentElement.is(":visible")) {
    jQuery('.outerFilterContainer').hide();
  } else {
    jQuery('.outerFilterContainer').hide();
    currentElement.show();
  }
});
jQuery(document).on('click', '.outerFilterContainer * , .outerFilterBox', function(e){
  e.stopPropagation();
});
jQuery(document).on('click', 'html,body', function() {
  jQuery(".outerFilter .outerFilterContainer").hide();
}); // OuterFilter Check End