Close tab when clicked outside

Question

I am working on a slide out tab that will open and close when the user clicks on the "Feedback" button. Current logic hides the tab by default and then check the margin-right. It all works great. My only concern is how do I close the tab if I click outside it?

Link to the working JSFiddle

(function($) {
  //<![CDATA[
  $(document).ready(function() {

    $(function() {
      $('#nav').stop().animate({
        'margin-right': '-230px'
      }, 1);

      function toggleDivs() {
        var $inner = $("#nav");
        if ($inner.css("margin-right") == "-230px") {
          $inner.animate({
            'margin-right': '0'
          });
          $(".nav-btn").html('<img src="http://bookbecho.com/img/feedback.png" alt="open" />')
        } else {
          $inner.animate({
            'margin-right': "-230px"
          });
          $(".nav-btn").html('<img src="http://bookbecho.com/img/feedback.png" alt="close" />')
        }
      }
      $(".nav-btn").bind("click", function() {
        toggleDivs();
      });

    });


  }); //]]> 


})(jQuery);

Possible duplicate of [How to detect a click outside an element?](http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element) — Bram Vanroy, Feb 26 '16 at 14:47

score 1 · Accepted Answer · answered Feb 26 '16 at 14:55

See this fiddle

Create a new function in your JS as below

function closediv() {
  var $inner = $("#nav");
  $inner.animate({
    'margin-right': "-230px"
  });
  $(".nav-btn").html('<img src="http://bookbecho.com/img/feedback.png" alt="close" />')
}

and call it as below

$('html').click(function() {
  //Hide the menus if visible
  var $inner = $("#nav");
  if ($inner.css("margin-right") != "-230px") {
    closediv();
  }
});

NiZa · Answer 2 · 2016-02-26T14:59:07.983

$(document).ready(function() {



  function toggleDivs() {
    var $inner = $("#nav");
    if ($inner.css("margin-right") == "-230px") {
      $inner.animate({
        'margin-right': '0'
      });
      $inner.addClass("active");
      $(".nav-btn").html('<img src="http://bookbecho.com/img/feedback.png" alt="open" />')
    } else {
      $inner.removeClass("active");
      $inner.animate({
        'margin-right': "-230px"
      });
      $(".nav-btn").html('<img src="http://bookbecho.com/img/feedback.png" alt="close" />')
    }
  }

  $(".nav-btn").bind("click", function(e) {

    e.stopPropagation();

    toggleDivs();


  });

  $(document).on("click", function(e) {
    e.preventDefault();
    $("#nav").animate({
      'margin-right': "-230px"
    });
    $(".nav-btn").html('<img src="http://bookbecho.com/img/feedback.png" alt="open" />')


  });


});

div#nav {
  position: fixed;
  top: 37.5%;
  right: 0;
  margin: 0;
  padding: 0px 0 0;
  background-color: #c1c1c1;
  list-style: none;
  z-index: 9999;
  width: 230px;
  border-radius: 0px 0 0 0px;
  height: 202px;
  border: 2px solid #000;
}

div#nav .nav-btn {
  position: absolute;
  top: 0px;
  left: -33px;
  width: 31px;
  height: 217px;
  display: block;
  cursor: pointer;
  margin-top: -2px;
}

div#nav .nav-btn img {
  margin: 0px 0 0 0px;
}

div#nav li {
  width: 100px;
  margin-bottom: 20px;
  text-align: center;
  text-decoration: none;
  color: #FFF;
}

div#nav li a {
  color: #FFF;
  text-decoration: none;
}

p.helpParagraph {
  color: #ff6699;
  text-align: center;
  margin-top: 9%;
  font: 26px/1.2 'FuturaBT-Book', Arial, Helvetica, sans-serif;
}

p.csText {
  padding-left: 6%;
  font: 14px/1.2 'FuturaBT-Book', Arial, Helvetica, sans-serif;
  color: #323470;
}

button.cs-button {
  background: #323470;
  color: #fff;
  margin-left: 5%;
  padding-bottom: 2%;
  padding-top: 2%;
  border: none;
  width: 90%;
  margin-bottom: 4%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
  <div class="nav-btn"><img alt="open" src="http://bookbecho.com/img/feedback.png" /></div>

  aaaaaaaaaaaaaaaaaaaaaa
</div>

When I place it in my code it close the tab by default. Not only when you click outside the div — John, Feb 26 '16 at 14:53

score 0 · Answer 3 · answered Feb 26 '16 at 14:59

0

I hope this help

https://jsfiddle.net/NourSammour/hz4v2ka4/6/

$("html").bind("click", function(e) {

    var container = $("#nav");

    if (e.target.tagName === 'HTML' && container.css('margin-right') === '0px') {
        toggleDivs()
    }
});

answered Feb 26 '16 at 14:59

Nour Sammour

2,822
1
20
19

Close tab when clicked outside

3 Answers3

See this fiddle