Creating a generic function to show or hide elements in JavaScript

<a href="#" class="menu-toggle">Menu</a>
<nav class="the-menu">Links Here</nav>

<script>
$('.menu-toggle').click(function(){
    $('.the-menu').show();
});
</script>

<a href="#menu" class="menu-toggle" data-showhide>Menu</a>

<nav class="the-navigation" id="menu" data-docclose>
    Navigation links go here
</nav>

// 1. Rather than binding directly to the click action of the links, we use the on function so that 
// even elements injected via JavaScript can use the same code without rebinding the event.
// 2. You may choose to use a class, but we've adopted the use of data-* attributes to indicate 
// what link should open another element on the page 

$('body').on('click','[data-showhide]',function(ev){

    ev.preventDefault(); // Stop the link from completing it's default function
    ev.stopPropagation(); // Stop the element's parent containers events firing

    // Get the element to show/hide based on the href attribute of the clicked element
    var target = $($(this).attr('href'));

    // close (clicking element that opens target)
    // by using CSS to animate the hidden element, we determine if it's visible based on the 
    // existence of the slide-down class
    if(target.hasClass('slide-down')){
      hideTarget(target,true);

    // open/slide-down
    }else{
      hideAll(ev); // hide all elements opened by JS
      target.addClass('slide-down'); // adding the slide-down class triggers CSS animation to open
    }

  });


  // hide/close single object
  function hideTarget(obj,slideup){

    var animation_time = 500;

    // slide up open object
    if(slideup){

      $(obj).addClass('slide-up'); // adding a slide-up class triggers an alternative CSS animation
      // using setTimeOut ensures we remove the slide-up class only after the animation is completed, 
      // therefore its important the animation_time variable matches the length of the animation 
      // in the CSS in milliseconds
      setTimeout(function(){
        $(obj).removeClass('slide-up');
      },animation_time);

    }

    // remove the slide-down class as it's no longer needed and would only cause issues if the 
    // user clicks the link again
    $(obj).removeClass('slide-down');

  }


  // hide/close all JavaScript opened elements
  // we use data-* attributes again to determine any elements that have been opened with 
  // JavaScript that we'd expect to be hidden if any other similar element is opened in the same way
  function hideAll(ev){

    // get all element defined to close on document click
    $('[data-docclose]').each(function(){

      // if the original clicked link isn't this element or a child of this element
      if(!$(this).is(ev.target) && $(this).has(ev.target).length === 0){

        // if uses CSS animation
        if($(this).hasClass('slide-down')){
          hideTarget(this);

        // else just hide
        }else if($(this).is(':visible') && $(this).css('max-height') != '0px'){ // i.e. doesn't use slide-down
          $(this).hide();
        }

      }

    });
  }


  // if anywhere external to the elements revealed with JavaScript are clicked, hide everything 
  // (remember it checks to see if the click is on or within itself)
  $(document).click(function(ev){
    hideAll(ev);
  });

.slide-down    {animation:slideDown 1.5s forwards;}
.slide-up      {animation:slideUp 0.5s forwards;}

@keyframes slideDown{
    from {overflow:hidden;}
    to   {max-height:800px; overflow:auto;}
}

@keyframes slideUp{
    from {max-height:800px; overflow:auto;} // so long as your container doesn't need to be larger than max-height you want, any number is suitable here
    to   {max-height:0; overflow:hidden;}
}

.the-navigation   {max-height:0; overflow-x:auto;
  &:target        {display:block; max-height:800px;} // ensures this can be opened without JavaScript
}