CODEWITHSUNDEEP
jqueryhtmlcss
user2498890
user2498890

Reputation: 1556

How to close a div on click of anywhere but the div?

I'm in the process of creating a 'drawer' that opens on click of any link in a bar and changes the content within the drawer based on the link that's clicked.

Despite researching I've got this far and now I'm stuck. I'm finding it difficult to figure out a solution that works with my current setup. I'd like to set it so that on click of anywhere else the 'drawer' fades out. Can anyone shed some light on how I might achieve this with my current setup?

Thanks in advance!

$('.filters-toolbar__drop-down:gt(0)').hide();
$('.filters-toolbar__drop-down-wrapper').hide();

$('.filters-toolbar').on('click', 'a', function() {
  $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
  var $this = $(this);
  $('.filters-toolbar__drop-down-wrapper').fadeIn('slow');
  $('body').addClass('filter-open');

  // fade out all open subcontents
  var visibleElements = $('.filters-toolbar__drop-down:visible');
  if (visibleElements.length <= 0) {
    $('.filters-toolbar__drop-down[id=' + $this.data('id') + ']').fadeIn('slow');
  } else {
    visibleElements.fadeOut('slow', function() {
      $('.filters-toolbar__drop-down[id=' + $this.data('id') + ']').fadeIn('slow');
    });
  }
});
.filters-toolbar-wrapper {
  margin-bottom: 0;
  width: 100%;
}

.filters-toolbar__item {
  padding: 0 50px;
   display: inline-block;
}

.filters-toolbar__drop-down-wrapper {
  background-color: grey;
  border-bottom: 1px solid #000;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
}

.filters-toolbar__drop-down {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filters-toolbar-wrapper">
  <div class="filters-toolbar">

    <div class="filters-toolbar__item">
      <a href="#" data-id="filter1">Type</a>
    </div>
    
    <div class="filters-toolbar__item">
      <a href="#" data-id="filter2">Color</a>
    </div>

    <div class="filters-toolbar__item">
      <a href="#" data-id="filter3">Sorty by</a>
    </div>
    
  </div>
</div>

<div class="filters-toolbar__drop-down-wrapper">
  <div id="filter1" class="filters-toolbar__drop-down by-type">
    Type Dropdown
  </div>
  <div id="filter2" class="filters-toolbar__drop-down by-color">
    Color Dropdown
  </div>
  <div id="filter3" class="filters-toolbar__drop-down sort-by">
    Sort Dropdown
  </div>
</div>

Upvotes: 0

Views: 51

Answers (1)

BeeBee8
BeeBee8

Reputation: 3074

You can listen for click on the document or window and inside the listener function you can compare the id or any other attribute that you have on drawer.

If it doesn't match with the drawer attribute simply close the drawer. 

document.addEventListener('click', function(event) {
// You can choose any attribute available on drawer
// Instead of id
if (event.target.id != 'drawer') {

  `$("#drawer").fadeOut();`
}
});

You should add this listener inside your link click function and you can remove it later after fadeOut

Upvotes: 1

Related Questions