Collapse bootstrap button on click outside

Question

I am using this code, which is taken almost out of the box from the bootstrap docs, to get a simple collapse behaviour for a button (I converted the button to a link):

<button class="btn btn-link" type="button" data-toggle="collapse"     data-target="#collapseTree" aria-expanded="false"         aria-controls="collapseTree">
     <b>click me</b>
             </button>
                 <div class="collapse" id="collapseTree">
                       <div class="well">
                           <h6>Example text goes here</h6>
                       </div>
                 </div>

Now, what I am trying to do is to be able to close the text when the user clicks outside the button. I know that is asked many times in stack overflow but jQuery is NOT AT ALL intuitive ! at least for a beginner like me, so I am not really able to adapt any of the solutions proposed on this SO answer to get the desired behaviour.

For example, I am using this script (concept borrowed from here to try to control the outside click behaviour of the above code :

<script>
  $(document).ready(function () {
      $(document).click(function (event) {
      var clickover = $(event.target);
      var _opened = $(".btn-link").hasClass("collapse");
             if (_opened === true && !clickover.hasClass("data-toggle") && clickover.parents('.btn-link').length == 0) {
                $("button.data-toggle").click();
             }
       });
  });
</script>

but of course with no luck. Any hint would be greatly appreciated !

UPDATE

Another try with no luck here.

You should spend a little time and learn JQuery, not just for this type of problem, but for many other problems you will come across in HTML. — Jocko, Aug 24 '15 at 17:16
what is not intuitive on the answer proposed in your linked answer? It looks pretty intuitive to me. maybe we can help you with that which may help further down the line with more issues — Steve, Aug 24 '15 at 17:22
I also was confused by JQuery and hated Javascript, but after learning it realized it's quite powerful and kind of like it. I like it even more with Coffeescript. Take this tutorial https://www.w3schools.com/jquery/default.asp — Chloe, Jun 12 '17 at 17:37

score 2 · Answer 1 · answered Aug 24 '15 at 17:15

2

you could use the following:

//handling the hiding when clicking anywhere else in the document
$(document).mouseup(function(e)
{
    var container = $('.btn-link');
    if (container.has(e.target).length === 0) {
      // the closing function
    }
});

answered Aug 24 '15 at 17:15

AhmadAssaf

3,556
5
31
42

thank you Ahmad! What is the form of the closing function that I shall use? What is the property that closes the button when clicked? – pebox11 Aug 24 '15 at 21:14
@pebox11 can you add jsFiddle for your example please – AhmadAssaf Aug 25 '15 at 10:43
@pebox11what i am supposed to see in this example. Its just a button and a text, there is no interaction at all – AhmadAssaf Aug 26 '15 at 08:58
That is the main issue as depicted in the original question also. What am I doing wrong and see no interaction? That is why I said jQuery is not at all intuitive, at least for a beginer like me... – pebox11 Aug 26 '15 at 13:34

Chloe · Answer 2 · 2017-06-12T17:44:58.020

This is how I did it in Coffeescript for Bootstrap 4 with a non-standard navbar.

  $(document).click (e)->
    #console.log e.target
    unless $('#toggle-button').has(e.target).length || $('#toggle-menu').has(e.target).length
      $('#toggle-menu').collapse('hide')

So basically, unless you click the button or the menu, close the menu.

Note: Strange, on iOS clicking on text doesn't register a click event, nor a mouseup event. Clicking on an image does fire events though. Don't know how to fix this.

Collapse bootstrap button on click outside

2 Answers2