Collapse the stacked navigation menu upon clicking a new item, utilizing Bootstrap 4 features

One issue I am facing is with my layered navigation setup.

https://i.sstatic.net/xyz123.png

Whenever I click on two items that have children, both of them remain open causing the menu to get a scrollbar. However, I do not want to hide the scrollbar.

https://i.sstatic.net/abc456.png

Is there a way to automatically close one item when another is clicked?

Below is a snippet from my menu:

<li class='nav-item' data-toggle='tooltip' data-placement='right' title='Stock Management'>
  <a class='nav-link nav-link-collapse collapsed' data-toggle='collapse' href='#collapseMulti33' data-parent='#exampleAccordion'>
<i class='fas fa-fw fa-lock'></i>
<span class='nav-link-text'>Admin</span>
</a>
<ul class='sidenav-second-level collapse' id='collapseMulti33'>
<li>
<a href='/admin/settings.php'>Settings</a>
</li>
<li>
<a href='/admin/logs.php'>Logs</a>
</li>
<li>
<a href='/monitor/index.php?disp=bootstrap'>System Information</a>
</li>
</ul>
</li>

https://i.sstatic.net/pqr789.png

javascriptjqueryhtmlcssbootstrap-4

Answer №1

To make your collapsible elements work properly, add the data-parent attribute and use a valid id selector as shown in the Bootstrap documentation.

An example of how it should be implemented (using #offcanvasNav as the parent element):

<ul id="offcanvasNav">
  <li class='nav-item' data-toggle='tooltip' data-placement='right' title='Stock Management'>
    <a class='nav-link nav-link-collapse collapsed' data-toggle='collapse' href='#collapseMulti33' data-parent='#offcanvasNav'>
      <i class='fas fa-fw fa-lock'></i>
      <span class='nav-link-text'>Admin</span>
    </a>
    <ul class='sidenav-second-level collapse' id='collapseMulti33'>
      <li>
        <a href='/admin/settings.php'>Settings</a>
      </li>
      <li>
        <a href='/admin/logs.php'>Logs</a>
      </li>
      <li>
        <a href='/monitor/index.php?disp=bootstrap'>System Information</a>
      </li>
    </ul>
  </li>
  [...]
</ul>

If you prefer using JavaScript, check out the available methods in the Bootstrap documentation to easily close other collapsible elements.

https://i.sstatic.net/FaGZF.png

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

Personalizing the form controls in Bootstrap for selection options

Utilizing Bootstrap's form-control class helps maintain a consistent style for both form input and select option elements. However, when using form-control on select elements, it results in an unsightly drop-down button appearance in Firefox.https://i ...

cssbootstrap-4html-inputform-control

What is the reason behind JavaScript subtracting the timezone offset for ISO dates when passed into the Date() function?

In my function, I handle different valid date strings to produce a JavaScript Date object. Most strings work as expected, however, when an ISO formatted date (YYYY/MM/DD) is provided, the user's timezone offset is deducted from the date. For example ...

javascriptdatedatetime

What methods can be used to eliminate superfluous `require(...)` or `import "...` statements while working with Rollup?

Currently, I am in the process of developing a library named share which will be utilized in various other services. To bundle this library, I have opted for Rollup.js. share serves as a common library accessed by multiple services, therefore it is essent ...

javascriptnode.jstypescriptbundlerrollupjs

Exploring the World of Background Processes in Meteor

Is there a way to incorporate background tasks, possibly using a workers pool? I'm interested in exploring this concept further and potentially developing a package for it. Can you point me in the right direction? ...

javascriptmeteornpm

Track the number of books read per month using an array of objects

Consider the following array of objects: const sampleArray = [{"read":true,"readDate":2021-01-15T18:21:34.059Z}, {"read":true,"readDate":2021-01-15T18:21:34.059Z}, {"rea ...

javascriptnode.js

How do I prevent the default submission behavior in an asp:ImageButton when the user presses the enter key in ASP.NET using C#?

Whenever I attempt to use this code snippet, it doesn't seem to work properly. How can I prevent the submit behavior of an asp:ImageButton? Here is the HTML code I am working with: <td class="style101"> <asp:ImageButton ID="imgBtnPos ...

c#htmlasp.net

Using Vue.js - Passing a prop into $.each() within the mounted lifecycle hook

When my component is mounted, I am looking to iterate over an object literal. However, I am encountering difficulties in accessing the prop data within my .each() function. Upon checking with console.log, the prop data appears 'undefined' inside ...

javascriptjqueryvue.jseach

Show the content of a div inside a tooltip message box in an MVC application

I have a MVC application where I need to show tooltip messages when hovering over my HTML div. HTML: <li class="Limenu" data-placement="right"> <span class="LessMenuspan btn-primary" pid="@i.ConsumerNo_" onmouseover="FacebookprofileTip(1, 0,thi ...

jqueryhtmlasp.net-mvctooltip

What is the process for integrating data into the client API within next-auth?

I am currently utilizing next-auth for authorization with the credentials provider. I have successfully implemented sessions and allowed users to login. However, I need to pass additional data such as the user's firstname, lastname, username, and emai ...

javascriptnode.jsnext.jsnext-auth

Determine if a key begins with a specific string within an object and retrieve the corresponding value

If I have an object like this: let fruitSong = {'apple song':12, 'banana song': 24} Object.keys(fruitSong).forEach(e=>{ if(e.startsWith('apple')){ console.log(fruitSong[e]) } }) Is there a different meth ...

javascriptnode.js

How can I display a badge in my app when it is running using React Native?

For the past week, I've been dealing with an issue. My question is how can I display a new message badge without having to click on the message room when running my app. The badge should only show up after clicking on the message room. I see the badg ...

javascriptreactjsreact-native

Utilizing third party (jQuery) with AngularJS $compile

Currently, I am integrating angularjs into a website that is already using jquery to load content asynchronously. The content is loaded and then appended to the DOM using jQuery instead of AngularJS. Here is an example of what I have: function loadConte ...

jqueryajaxangularjs

Ways to prevent my website from being accessed through the Uc Browser

Is there a way to prevent my website from functioning on UC Browser using HTML or JavaScript? ...

javascripthtml

What could be causing my HTML website to load slowly and freeze when I switch to another program?

I am in the process of creating three websites. Two of them are functioning perfectly fine, but I am encountering a speed issue with the third one. Sometimes it loads slowly initially, but if I wait a bit longer, it eventually loads and works well. However ...

htmlcssperformancebootstrap-4freeze

Utilizing the componentDidUpdate method to update the state within the component

I have a scenario where two components are enclosed in a container. One component is retrieving the Id of a publication, while the other is fetching the issue date related to that specific publicationId. When I retrieve an Id, let’s say 100, it successf ...

javascriptreactjstypescriptaxios

Display the datepicker beneath the input field

I successfully integrated the datepicker, but I prefer for the calendar to display below the date input field rather than above it. HTML5 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv=" ...

javascriptjquerycsshtmltwitter-bootstrap

When I click on "Submit", it redirects me to the PHP page

I've followed a tutorial on creating custom PHP contact forms at this link: and made some modifications to the form for my specific requirements. However, when I click the Submit button on the form, it redirects me to the PHP page. What I actually w ...

phphtmlformsemailsubmit

What is the best way to filter out duplicate objects in JavaScript?

I have the following code snippet: let self = this; self.rows = []; self.data.payload.forEach(function (item, index) { if (!(self.rows.includes(item))) { self.rows.push(item); } }); The issue is that includes always returns false. Each ite ...

javascriptvue.js

Steps to resolve background image problems

Currently encountering issues with the application where the background image is not showing up behind the login form. This problem arises while using a bootstrap template for the website. Attempted to set the background image in the .main-content div with ...

htmlcssasp.net-corefrontendweb-frontend

Unable to retrieve data from CKEditor using Ajax

Having some issues with my AJAX implementation in PHP, specifically trying to retrieve data from CKEditor but encountering difficulties. Here are my codes: <form> <textarea id="editor" name="Content" required></textarea&g ...

phpjqueryajaxckeditor