Using .toggle() to show and hide a div on click not working

Is this what you're looking for?

$(document).mouseup(function(e) { 
  var $container = $(".my-div"); 
  if (!$container.is(e.target) && !$(".my-button").is(e.target) && $container.has(e.target).length === 0) { 
    $container.hide(); 
  } 
}); 
 
$(".my-button").click(function() { 
  $(".my-div").toggle(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button class="my-button">Click me!</button> 
<div class="my-div">Show Me or Hide Me!</div>

You must properly attached the event to the button and use toggle() to hide or show the div

$(document).ready(function(e) { 
    $(".my-button").click(function(e){ 
      $(".my-div").toggle(); 
    }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<a class="my-button">Click me!</a> 
<div class="my-div">Show Me or Hide Me!</div>

First I would try show/hiding just on the button click Give this a try. First of all give your button an id="show_hide" and your div an id="my_div"

    $('#show_hide').click(function (e) {
        var x = document.getElementById('my_div');
        if (x.style.display === 'none') {
            x.style.display = 'block';
        } else {
            x.style.display = 'none';
        }
    });

You can change the ID's to whatever you want, but I suggest this in case you want to give other elements the same class but without this functionality

Alternatively you could add this to make it disappear when clicking anywhere else other than the button you should be able to use the following function

$(document).ready(function(){ 
  $(document).mousedown(function(e){ 
    var x = document.getElementById('my_div');
    if( e.button == 1 ) { 
        var isHovered = $('#my_div').is(":hover");
        if (!isHovered) {
            x.style.display = 'none';
        }
    } 
  }); 
});