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/

score 2 · Answer 1 · answered Nov 26 '14 at 17:42

2

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

answered Nov 26 '14 at 17:42

PeterKA

24,158
5
26
48

Thanks allot for the answer, just one question. Is there a way to change the colour of the toggle so it's black when it's closed and green when it's open? – Thomas Talavera Karslake Nov 28 '14 at 14:12
Not sure I fully understand your question but you can us: .css(...)... to change any CSS. – PeterKA Nov 28 '14 at 14:17

score 0 · Answer 2 · edited May 23 '17 at 12:06

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.

Thanks for you answer. I think this solution really solves the problem, I want the icon to change colour as soon as the toggle is activated or deactivated. The only thing I don't know how to solve is to stop the propagation if I click anywhere on the screen and not only on the right side of the div. Would you know a solution to this? — Thomas Talavera Karslake, Nov 28 '14 at 09:58

score 0 · Answer 3 · answered Nov 26 '14 at 17:51

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/

Crs · Answer 4 · 2015-10-05T11:04:40.047

0

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');
    }

});

edited Oct 05 '15 at 11:04

answered Oct 05 '15 at 10:56

Crs

104
8

Hide content when clicking outside div with jquery

4 Answers4