stop bootstrap collapse from re-activating when an item is clicked

I'm currently facing an issue with my sidebar that is implemented using bootstrap collapsible. The menus are all in tags, but the problem arises when I click on one of these tags - the page refreshes, re-animating the collapsible panel and creating a less than ideal user experience.

To mitigate this issue, I have already stored the state of the collapsible items in a cookie to remember their previous state before reloading. However, the reanimation of the collapsing is still occurring. Any suggestions on how to solve this problem?

            <a class="nav-link" data-bs-toggle="collapse" data-bs-target="#ui-basic" aria-expanded="true" aria-controls="ui-basic">
                <i class="icon-layout menu-icon"></i>
                <span class="menu-title">Listing Management</span>
                <i class="menu-arrow"></i>
            </a>
            <div class="collapse" id="ui-basic">
                <ul class="nav flex-column sub-menu sideBarPanel">
                    <li class="nav-item"> <a class="nav-link" href="/someURL">Create</a></li>
                    <li class="nav-item"> <a class="nav-link" href="/someURL}">Featured List</a></li>
                    <li class="nav-item"> <a class="nav-link" href="/someURL"}">Automated List</a></li>
                </ul>
            </div>
        </li>
 <li class="nav-item">
            <a class="nav-link" data-bs-toggle="collapse" data-bs-target="#ui-basic" aria-expanded="true" aria-controls="ui-basic">
                <i class="icon-layout menu-icon"></i>
                <span class="menu-title">Listing Management</span>
                <i class="menu-arrow"></i>
            </a>
            <div class="collapse" id="ui-basic">
                <ul class="nav flex-column sub-menu sideBarPanel">
                    <li class="nav-item"> <a class="nav-link" href="/someURL">Option 4</a></li>
                    <li class="nav-item"> <a class="nav-link" href="/someURL}">Option 5</a></li>
                    <li class="nav-item"> <a class="nav-link" href="/someURL"}">Option 6</a></li>
                </ul>
            </div>
        </li>
javascripthtmljquerycssbootstrap-5

Answer №1

Your query seems a bit unclear, so please rephrase it if the provided answer is not satisfactory.

Upon reviewing your code, it appears that you are using duplicate IDs and both .nav-links share the same data-bs-target target, which will cause issues.

To resolve this, ensure each toggle target and collapse ID is unique:

            <a class="nav-link" data-bs-toggle="collapse" data-bs-target="#ui-basic" aria-expanded="true" aria-controls="ui-basic">
                <i class="icon-layout menu-icon"></i>
                <span class="menu-title">Listing Management</span>
                <i class="menu-arrow"></i>
            </a>
            <div class="collapse" id="ui-basic">
                <ul class="nav flex-column sub-menu sideBarPanel">
                    <li class="nav-item"> <a class="nav-link" href="/someURL">Create</a></li>
                    <li class="nav-item"> <a class="nav-link" href="/someURL})">Featured List</a></li>
                    <li class="nav-item"> <a class="nav-link" href="/someURL"})">Automated List</a></li>
                </ul>
            </div>
        </li>
 <li class="nav-item">
            <a class="nav-link" data-bs-toggle="collapse" data-bs-target="#ui-basic-2" aria-expanded="true" aria-controls="ui-basic-2">
                <i class="icon-layout menu-icon"></i>
                <span class="menu-title">Listing Management</span>
                <i class="menu-arrow"></i>
            </a>
            <div class="collapse" id="ui-basic-2">
                <ul class="nav flex-column sub-menu sideBarPanel">
                    <li class="nav-item"> <a class="nav-link" href="/someURL">Option 4</a></li>
                    <li class="nav-item"> <a class="nav-link" href="/someURL})">Option 5</a></li>
                    <li class="nav-item"> <a class="nav-link" href="/someURL"})">Option 6</a></li>
                </ul>
            </div>
        </li>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtain the clicked href value and pass it from one page to another

Welcome, everyone, I am currently in the process of creating a webpage that serves the following functions: When the administrator accesses the page, they will see a form populated with information fetched from a database: https://i.sstatic.net/RrE9l.png ...

javascriptphpjqueryhtmlmysql

Tips for adjusting column positions in a table while maintaining a fixed header and utilizing both horizontal and vertical scrolling

Is there a way to display a table that scrolls both horizontally and vertically, with the header moving horizontally but not vertically while the body moves in both directions? I have been able to shift the position of the columns, however, I am struggling ...

javascriptjqueryhtmlcsshtml-table

Tips for Integrating a Facebook Shop Page into Your Website

Can a Facebook shop page be integrated into a website? Any guidance on how to accomplish this task would be greatly valued. ...

javascripthtmlfacebookpluginsembed

The drop-down menu fails to appear when I move my cursor over it

#menu { overflow: hidden; background: #202020; } #menu ul { margin: 0px 0px 0px 0px; padding: 0px 0px; list-style: none; line-height: normal; text-align: center; } #menu li { display: inline-block; } #menu a { display: block; position: relative; padding ...

javascripthtmlcssreactjs

Obtain date and currency formatting preferences

How can I retrieve the user's preferences for date and currency formats using JavaScript? ...

javascriptjqueryhtmllocalizationgeolocation

Issues with CSS Modules not applying styles in next.js 13 version

Employing next.js 13.1.1 along with /app Previously, I had been handling all of my styles using a global.css, however, I am now attempting to transition them into CSS Modules. Within my root layout.js, there is a Header component that is imported from ./ ...

javascriptreactjsnext.jsnext.js13

Identifying the server control ID on the master page with the help of jQuery

My Asp.net Master Page includes an adrotator element. <asp:AdRotator ID="adr" AdvertisementFile="~/Adrotator.xml" Width="180px" Height="200px" runat="server" Target="_self" /> I have implemented a jquery script to rotate the ADS, b ...

jqueryasp.netmaster-pagesadrotator

Top method for creating 12 dynamic product pages using AngularJS with customized routing and templates

As someone who is still relatively new to AngularJS, I am looking for advice on how to properly structure the products section of my application. My main product page will display all 12 products with clickable links to individual product pages. Each indi ...

javascriptangularjs

Displaying a success dialog after closing a Bootstrap modal

I have set up a bootstrap modal containing a form. Upon submitting the form, the form content is hidden and a bootstrap alert message is displayed. However, upon clicking the bootstrap popup, the same alert message is shown in the popup instead of displayi ...

jqueryhtmlcsstwitter-bootstrap

Error in Node.js: Unable to access properties of null value within Express

While using Express (with node.js) and MongoDB, I encountered an error when trying to view or update a user profile. The middleware token check worked fine getProfileFields:::::::::::::>>>>e: TypeError: Cannot read properties of null (rea ...

javascriptnode.jsexpress

Starting a fresh SSH terminal directly from a web browser

I have an SSH IP address. Is it feasible to launch an SSH terminal through a web browser, similar to clicking on a hyperlink or Google Play store link? For instance: Click Here to Open SSH Terminal Upon clicking this link, the SSH session should open an ...

javascriptphpjquerysshbrowser

Update the content on the webpage to display the SQL data generated by selecting options from various dropdown

My database table is structured like this: Name │ Favorite Color │ Age │ Pet ────────┼────────────────┼───────┼─────── Rupert │ Green │ 21 │ ...

javascriptjqueryhtmlsqlajax

Seeking guidance on capturing the correct error message when using JSON stringify?

Imagine I have an object structured as follows var obj = { "name": "arun" age } After attempting JSON.stringify(obj), it results in an error due to the improper structure of the obj. I am interested in capturing this error displayed in the console and pr ...

javascriptjson

How can I incorporate the URL bar with jQTouch?

Currently working on a mobile website using jQTouch. For instance, if we take the official demo site as an example and visit this link, we will land on the main screen. Navigating to AJAX -> Get Example, we notice the location bar changing to /#get. Ho ...

jqueryhttp-redirecturl-rewritingjqtouch

Retrieving checkbox data and transmitting it without using a form submission

I've been attempting to extract values from a checkbox group, but for some reason, it's not working as expected. Here is the approach I'm taking: Using a loop to generate checkboxes <input class="group1" type="checkbox" name="catCheck" ...

javascriptjquery

Encountering a "cross domain" error while trying to invoke the Kafka Connect REST API using $.ajax({...})

I am currently running version 2.0.1 of the Confluent Data Platform with the Kafka Connect service operational. When attempting to send REST calls from a Backbone.js framework, I encounter CORS exceptions (cross-domain exceptions). I am not using the Backb ...

jqueryajaxrestcorsapache-kafka

Issue with Vue 3: Button components fail to update upon modification of second dropdown menu

As a newcomer to Vue, I've encountered a challenging issue that I'm struggling to solve. Despite making significant progress on a complex project, I find myself perplexed by what should be a simple feature... A Brief Background/Overview: The pro ...

twitter-bootstrapvue.jsvuejs3bootstrap-5

Instructions for downloading a file using Front End technology in Java and HTML

I am looking to initiate a file download upon clicking a button on the front-end interface. Front End <td><a name="${flow.name}" data-toggle="tooltip" title="Report" class="generateReport"><span class="far fa-file-excel"></span>&l ...

javascriptjavajqueryhtmlspring

Importing usernames and passwords from a .txt file with Javascript

I'm in the process of creating a website that includes a login feature. The usernames and passwords are currently stored within the website files as .txt documents. I am aware that this method is not secure, but for the purpose of this project, I want ...

javascripthtmlcssauthenticationweb

Utilizing AJAX and JQuery to Load KML Data

Attempting to integrate a KML layer into Google Maps API 3.0 using a JQuery AJAX request. Here is the current code setup (currently not functioning). <script> $(document).ready(function(){ $.ajax({ url : 'https://blahhhhhhhhhh.com/KML_Pla ...

jqueryajaxgoogle-mapskml