Close the Bootstrap 3.1.1 collapse feature by clicking outside of it

Question

Close the Bootstrap 3.1.1 collapse feature by clicking outside of it

I'm currently working on a Twitter Bootstrap 3.1.1 app that features a nested Bootstrap structure.

<ul class="goods-categories goods-list">
  <div id="point" data-toggle="collapse" data-target="#all" class="point blue m-top">All products</div>
  <div id="all" class="collapse">
    <li><a href="/products?category_id=11">Paper Products</a></li>
    <li><a href="/products?category_id=14">Notepads, Dispensers</a></li>
    <li><a href="/products?category_id=13">Notebooks, Journals</a></li>
  </div>
</ul>

I am trying to figure out how to implement a feature where the collapse toggles closed when a user clicks outside of the #all and its children. Any ideas on how to achieve this?

css ruby-on-rails twitter-bootstrap twitter-bootstrap-3

Answer 1

Answer №1

To manually show/hide collapsible items, you can utilize the functions provided by bootstrap collapse. For your situation, the following code snippet should prove to be effective:

$('body *').not('.goods-categories.goods-list, .goods-categories.goods-list *').click(function() {
  $('#all').collapse('hide');
});

The code snippet above attempts to attach a click event to the body element excluding the specified list and its descendants. Upon clicking anywhere outside of the list, the collapsible item is hidden.

Note: The code has not been tested, but with slight modifications, it should be functional.

Answer 2

To manually show/hide collapsible items, you can utilize the functions provided by bootstrap collapse. For your situation, the following code snippet should prove to be effective:

$('body *').not('.goods-categories.goods-list, .goods-categories.goods-list *').click(function() {
  $('#all').collapse('hide');
});

The code snippet above attempts to attach a click event to the body element excluding the specified list and its descendants. Upon clicking anywhere outside of the list, the collapsible item is hidden.

Note: The code has not been tested, but with slight modifications, it should be functional.

Answer 3

Answer №2

$(document).click(function (e)
{
    var box = $("#container");
    if (!box.is(e.target) && box.has(e.target).length === 0)
    {
        box.removeClass('active');
    }
});

Answer 4

$(document).click(function (e)
{
    var box = $("#container");
    if (!box.is(e.target) && box.has(e.target).length === 0)
    {
        box.removeClass('active');
    }
});

Close the Bootstrap 3.1.1 collapse feature by clicking outside of it

Answer №1

Answer №2

Similar questions

Arrange a line of images in the center

Position the text in the center of a graph within a grid cell by utilizing dash and plotly

Tips for preventing cursor tooltips from going off the screen

Error detected at line 15, column 2: ` unable to open socket: /tmp/mysql.sock'`

What is the best way to stack a canvas box on top of another canvas box?

The data is being uploaded, but it is not being stored in the database

My dropdown does not appear to be moving up properly in responsive mode

Enhance User Experience in IE11 by Providing Font Size Customization with Angular (Using CSS Variables)

Troublesome tab key function in FireFox causing navigation issues

The spacing between elements in Flexbox is too excessive, creating an overly wide gap

Advanced data synchronization with Angular 7's bidirectional data binding feature

Implement a vertical background sprite animation using jQuery along with a mask

MUI Typography - Text turns white when hovered over

How to Style Background with CSS on the Server-Side? (Including Links and Hover Effects)

The Model Viewer module is unable to load the three-dimensional model

Having trouble compiling your Vue project and running into the "No mixed spaces and tabs" error?

The BorderWidth property is set to 2px, however, it is not visible on the

"Enhance your website with a dynamic hover effect and striking letter spacing in

HTML - Customizing container with background color and ensuring minimum height of 100%

Troubleshooting problem with CSS background image