I have a search-filter offcanvas div for location and property type on this webpage:
On larger screens (desktop), the offcanvas is always visible, but on smaller screens (mobile), it is hidden and can be toggled with a button. This functionality works perfectly.
Now, when the page loads, I want to display the offcanvas if it is currently hidden (on smaller screens) after checking some custom business logic (not discussed in this post).
How can I achieve this?
Something like this:
var myOffcanvas = document.getElementById('filters-sidebar');
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas);
var myCustomBusinessLogicCheck = true;
var isTheOffcanvasActuallyOffCanvasRightNow = ?? //detect if offcanvas element is currently actually off-canvas
if (isTheOffcanvasActuallyOffCanvasRightNow & myCustomBusinessLogicCheck) {
bsOffcanvas.show();
}
What I have attempted:
- I tried searching for *.bs.offcanvas events, but they only trigger after interactions, not during the initial page load when the offcanvas is hidden.
- Examined the _isShown property of bsOffcanvas, but it returns "false" on desktops, so that doesn't seem to be a viable solution.
- Explored other properties of bsOffcanvas without success.
- I may resort to checking the visibility of an element with d-lg-none as a workaround, although it feels somewhat unconventional. However, it will serve as my last option if no better approach is found.