Show/hide div on a click, toggle when clicked outside of the div

Question

This is what I have so far: For example, when I click on button1, content1 shows, when I click on button2, content1 closes and content2 appears. That works so far with this code:

    $("#buttons a").click(function(e){
    e.preventDefault();
    var toShow = $(this).attr('href');
    $(".togg").fadeOut();
    $(toShow).fadeIn();
    });

JSFiddle What I'm trying to do is keep this function, but add some things: if content1 is already open, toggle it when I click on its button (button1), and also toggle it when clicked outside of the content1 div. In short I want to toggle it when clicked anywhere but the div itself.

That isn't good idea to write relevant class name in `href` attribute. Use `data-*` attribute instead. — Mohammad, Sep 25 '16 at 13:45
Are you looking for this maybe?: http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it — Omnisite, Sep 25 '16 at 13:50
Check my answer, http://stackoverflow.com/a/39687580/6608101 — Mohit Tanwani, Sep 25 '16 at 14:08
@Omnisite Close, but no, it just reopens when I click the button — AthScc, Sep 25 '16 at 14:27
The "href" is always used to specified the location where you want use to get redirected, so it's not a good practice to defined class there. See in my code I've added the ID to each DIV, so we can easily identified the selector and based on that we can do the toggle. Try to create selectors which always easy to access. Because jQuery is all about selectors :) — Mohit Tanwani, Sep 25 '16 at 14:28

Mohit Tanwani · Accepted Answer · 2016-09-25T14:13:35.877

As you want to check whether the click is on the element or outside the element, for that you need to check nodeName or tagName or id

$(document).click(function(e) {
  //Check the element is none of the DIVS which we wants prevent.
  if(e.target.id != "content1" && e.target.id != "content2" && e.target.id != "content3")
    {
      //Hide the content div which is visible now.
      $('div.togg:visible').hide();
    }
});

You just need to create a dynamic selector to achieve kind of dynamic toggling function.

$("#buttons a").click(function(e){
    var selector = $('.'+$(this).attr('id'));
    selector.toggle();
    $('div.togg').not(selector).hide();
});

$("#buttons a").click(function(e){
    var selector = $('.'+$(this).attr('id'));
    selector.toggle();
    $('div.togg').not(selector).hide();
});
$(document).click(function(e) {
  //Check the element is none of the DIVS which we wants prevent.
  if(e.target.id != "content1" && e.target.id != "content2" && e.target.id != "content3")
    {
      //Hide the content div which is visible now.
      $('div.togg:visible').hide();
    }
});

.content1 {display:none;}
.content2 {display:none;}
.content3 {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons">
  <a href="#" id="content1">Div 1</a>
  <a href="#" id="content2">Div 2</a>
  <a href="#" id="content3">Div 3</a>
</div>
<div>
  <div class="content1 togg">1111</div>
  <div class="content2 togg">2222</div>
  <div class="content3 togg">3333</div>
</div>

Accept my answer if it helped you, it will encourage other people to use this solution. — Mohit Tanwani, Sep 25 '16 at 15:46

Show/hide div on a click, toggle when clicked outside of the div

1 Answers1