Currently, I am working on a navigation layout using Bootstrap that will be displayed as tabs on desktop and as an accordion on mobile devices. The setup is almost complete, but there is an issue that I'm struggling to resolve.
The problem arises when I click on a tab (let's say Link #3) in the desktop version and then switch to the mobile view. The correct tab (Link #3) opens, but if I try to close the tab by clicking on it, the content gets hidden while the button and toggle icon remain in the "open state." This issue can be observed on desktops or tablets which display the nav-tabs. To see the problem on your desktop, simply decrease the viewport size after selecting a nav tab.
I initially attempted to track the visibility of the content using 'classList.contains()' to control the open/close functionality. However, I realized that this method only works when the class is mentioned inline. If not specified inline, the function fails to keep track of the classes even though Bootstrap internally toggles between them. It seems like my usage of the contains function might be incorrect, or perhaps I overlooked something.
I also explored the idea of tracking clicks on the nav-tabs and accordions to add/remove the 'collapse' class accordingly. However, this approach interferes with other scenarios where the toggle function operates correctly.
Unfortunately, utilizing the toggle() function for Bootstrap accordion's 'collapse' or 'show' features did not yield the desired results either.
After experimenting further, I managed to make .contains() work but had to introduce a recursive function to handle the toggling of the 'collapsed' class, resulting in performance issues and unresponsiveness on the page.
// JavaScript code snippet goes here.container .nav-tabs {
display: none;
}
/* MEDIA QUERY */
@media screen and (min-width: 992px) {
.container .nav-tabs {
display: flex;
}
.accordion-item h2 {
display: none;
}
.container .accordion-item {
border: none;
}// HTML code snippet goes here