I have been working on implementing a dynamic 'drawer' feature where clicking on any link in a navigation bar opens the drawer and displays relevant content based on the clicked link. However, I have hit a roadblock in my progress despite thorough research.
I am struggling to find a solution that integrates seamlessly with my current setup. My goal is to make the drawer fade out when clicked anywhere else on the page. Can someone provide insights on how I can achieve this within my existing framework?
Thank you for your assistance!
$('.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 Content
</div>
<div id="filter2" class="filters-toolbar__drop-down by-color">
Color Dropdown Content
</div>
<div id="filter3" class="filters-toolbar__drop-down sort-by">
Sort Dropdown Content
</div>
</div>