Bootstrap Collapse hide on resize

Question

I have the following issue,

In certain part of my website I'm using a Bootstrap collapse to show an element that is supposed to be only seen in a mobile device, or resolution under 768px.

The issue I have is that if I toggle the element when under 768px but I don't close it, if I resize the browser the element remains visible.

I'm using $('#collapse').collapse('toggle'); to show the element.

So when I resize I can use .collapse('hide') to hide the element if it was toggled

But if I'm on a resolution below 768px without activating the Collapse and I resize back to a bigger resolution, the element gets toggled for sure because of the .collapse('hide').

So, how can I know if the element was toggled or active and in order to revert that when the browser gets resized?

Answer 1

You can use the jQuery Visible selector and if the element is visible set it to hidden.

if ($('#collapse').is(':visible')) {
    $('#collapse').collapse('hide');
}

Bootstrap Collapse