Javascript on-click toggle

Question

I have some code that when a user clicks away from a side-bar the side-bar closes, How do I change it so when a user clicks a link the side-bar also closes and as well as from the side bar

Example - if I was to click the word Home, it would then hide the side-bar.

 //hidding side header on click outside header $body.on('mousedown touchstart click', function(e) { if (!($(e.target).closest('.page_header_side').length) && !($sideHeader.hasClass('header_side_sticked'))) { $sideHeader.removeClass('active-slide-side-header'); $body.removeClass('active-side-header slide-right'); $body.parent().removeClass('html-active-push-header'); var $toggler = $('.toggle_menu_side'); if (($toggler).hasClass('active')) { $toggler.removeClass('active'); } } }); } //sideHeader check

 <header class="page_header_side header_slide header-special header_side_right ds"> <div class="scrollbar-macosx"> <div class="side_header_inner"> <p class="text-right mb-0 close-wrapper"><a href="">×</a></p> <div class="widget widget_recent_posts"> <h3 class="widget-title"><a href="index">Home</a></h3> </div> <div class="widget widget_recent_posts"> <h3 class="widget-title"><a href="#overview">Overview</a></h3> </div> <div class="widget widget_recent_posts"> <h3 class="widget-title"><a href="#about">About</a></h3> </div>

attached is the image of the sidebar when opened

Answer 1

I would turn all of your close code into a function like so:

function closeMenu(){
    if (!($(e.target).closest('.page_header_side').length) && !($sideHeader.hasClass('header_side_sticked'))) {
        $sideHeader.removeClass('active-slide-side-header');
        $body.removeClass('active-side-header slide-right');
        $body.parent().removeClass('html-active-push-header');
        var $toggler = $('.toggle_menu_side');
        if (($toggler).hasClass('active')) {
            $toggler.removeClass('active');
        }
     }
});

Then I would put the same handler that you have on the body on the links of the menu. Let's say your menu has an id of menu

So you would have:

$('body', '#menu a').onClick(function(){
    closeMenu();
});

This will add the handler to the body as well as all a tags within the menu.

Answer 2

With the given code this is what I have done:

//hidding side header on click outside header
$('.scrollbar-macosx').on('click', function(e) {

    //$sideHeader.removeClass('active-slide-side-header');
    //$body.removeClass('active-side-header slide-right');
    //$body.parent().removeClass('html-active-push-header');
    //if you want to keep playing with adding and removing classes them:
    //if (($toggler).hasClass('active')) {
      $('#elementToHide').fadeOut();
    //}

  });
//sideHeader check

And them your html:

<header class="page_header_side header_slide header-special header_side_right ds">
   <div class="scrollbar-macosx" id="elementToHide">
      <div class="side_header_inner">
         <p class="text-right mb-0 close-wrapper"><a href="#">×</a></p>
         <div class="widget widget_recent_posts">
            <h3 class="widget-title"><a href="#">Home</a></h3>
         </div>
         <div class="widget widget_recent_posts">
            <h3 class="widget-title"><a href="#">Overview</a></h3>
         </div>
         <div class="widget widget_recent_posts">
            <h3 class="widget-title"><a href="#">About</a></h3>
         </div>
      </div>
   </div>
</header>

Here is the fiddle : fiddle