Hide Element on Click outside of div

by Faisal Khan Janjua

HTML

<div id="sort_Filter" class="filterBox">
  <span>Sort by</span>
  <span class="filterArrow"></span>
  <div class="specs_options">
    <div class="">
      <div class="specs_options_header">
        <span class="closeFilter closeSortFilter"></span>
        <span class="reset-filters resetSorting"> Reset</span>
        <span class="filterHeading">Sort by</span>
      </div>
      <div class="priceFilter filter_labels_Container displayInline">
        <h4>Price</h4>
        <input id="p_hi2lw" type="radio" name="priceSort" />
        <label for="p_hi2lw">High to Low</label>

        <input id="p_lw2hi" type="radio" checked name="priceSort" />
        <label for="p_lw2hi">Low to High</label>
      </div>
      <div class="validitySortFilter filter_labels_Container displayInline">
        <h4>Validity</h4>
        <input id="v_hi2lw" type="radio" name="valaditySort" />
        <label for="v_hi2lw">High to Low</label>

        <input id="v_lw2hi" type="radio" checked name="valaditySort" />
        <label for="v_lw2hi">Low to High</label>
      </div>
      <div class="filterBtn">
        <button type="submit">Apply Sorting</button>
      </div>
    </div>
  </div>
</div>

SCSS

.filterBox{
  padding: 12px 16px;
  position: relative;
  border: 1px solid #c2c2c2;
  & span{
    color: #999;
    &.filterArrow{
      top: 14px;
      z-index: 5;
      width: 8px;
      right: 16px;
      height: 16px;
      position: absolute;
    }
  }
  & .specs_options{
    top:43px;
    left: 0;
    z-index: 3;
    right:0;
    padding:10px;
    display: none;
    position: absolute;
    background:#FFF;
  }
  &.open_filter{
    & .specs_options{
      display: block;
    }
  }
}
.reset-filters {
	float: right;
	color: #CCC;
	cursor: pointer;
	padding: 12px 0;
	padding-left: 18px;
	margin-left: 0;
}
.filter_labels_Container{
	font-size: 0px;
	margin-top: 20px;
	& h4{
		font-size: 14px;
		font-weight: 100;
		color: #ccc;
		margin: 0 0 8px 0;
	}
	& label{
		color: #0091d2;
		display: block;
		cursor: pointer;
		font-size: 13px;
		font-weight: 100;
		background: #FFF;
		position: relative;
		margin-bottom: 10px;
		padding: 10px 8px 8px 8px;
		border: 1px solid #0091d2;
	}
	& input{
		visibility: hidden;
		position: absolute;
		&:checked + label{
			color: #FFF;
			background: #0091d2;
		}
	}
	&.displayInline{
		& label{
			padding-left: 20px;
			padding-right: 20px;
			text-align: center;
			display: inline-block;
		}
	}
}

JavaScript

if($('#sort_Filter').length > 0){
  $('#sort_Filter').on('click', function(){
    $(this).addClass('open_filter');
  });
  $(document).mouseup(function(e){
    var container = $(".filterBox");
    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0){
      container.removeClass('open_filter');
    }
  });
}