Hide content when clicking outside div with jquery

Question

I'm using jquery to togle content with a button, I would like to hide the content when I click outside my "contentcone" div. The HTML is the following

<div class="togglecone">
        </div>
        <div class="contentcone">
            <div class="contentleft">
                <div class="title">
                Cone
                </div>
                <div class="maincopy">
                Hello my friends this is a really nice cone that can be placed anywhere
                </div>
                <a href="https://www.mcnicholas.co.uk/" class="button">
                View on website
                </a>
            </div>
            <div class="contentright"> <img src="images/cone.png" alt=""/>
    </div>
</div>

This is the script

 $(document).ready(function(){
      var $content = $(".contentcone").hide();
    $(".togglecone").on("click", function(e){
    $(this).toggleClass("expandedcone");
    $content.slideToggle();
    });
    });

http://jsfiddle.net/thomastalavera/SCKhf/914/

Answer 1

This should do it:

$(document).ready(function(){
    var $content = $(".contentcone").hide();
    $(document).on("click", function(e) { 
        if( $(e.target).is(".togglecone") ) {       
            $(this).toggleClass("expandedcone");                                        
            $content.slideToggle();

        } else {
            $content.slideUp();
        }
    });
});

DEMO

Answer 2

A simple and pretty blunt way to do this is:

 $(document).ready(function(){
   var $content = $(".contentcone").hide();
   $(".togglecone").on("click", function(e){  
      e.stopImmediatePropagation();
      $(this).toggleClass("expandedcone");
      $content.slideToggle();
   });
   $("body").on("click", function(e){
       if ($(".contentcone").is(':visible')) {
          $(".togglecone").click();
       }
   });
   $(".contentcone").on("click", function(e){
      e.stopImmediatePropagation();
      return false;
   })
 });

But note it has a lot of disadvantages, is just a blunt solution to your problem, it must be tweaked to be ok as a permanent choice.

Edit (to answer the question in comment):

Sure, I know more than 1, each depending on your layout. You can:

a) Instead of the "body" part, make a selector for whatever elements you want to toggle event one. This works ok on layouts with a small number of big (as size on screen) elements.

b) Add one more condition to the "body" part, where you get mouse position and use it to see if the mouse is in the place you want. You can do this with e.pageX/e.pageY, or you can find relevant relative position to an element here jQuery get mouse position within an element .

Answer 3

You need to set a click event on document to close the box. I tried to keep your original click function intact.

$(document).ready(function(){
  var $content = $(".contentcone").hide();
  $(".togglecone").on("click", function(e){
    $(this).addClass("expandedcone");
    $content.slideDown();
  });

  $(this).on('click', function(e) {
    if ($(e.target).is('.togglecone')) { // don't slide up if you click the cone
      return;
    }
    if ($(".togglecone").hasClass('expandedcone')) {
      $content.slideUp();
      $(this).removeClass("expandedcone");
    }
  });
});

http://jsfiddle.net/SCKhf/925/

Answer 4

This should do it with lesser code:

$(document).mousedown(function (e) {

    var container = $(".togglecone");

    if (!container.is(e.target) && container.has(e.target).length === 0)
    {
        container.fadeOut('slow');
    }

});