Ways to avoid Bootstrap from collapsing every submenu when selecting just one submenu

Having just started learning HTML and CSS, I wanted to create a vertical navigation bar with sub-sub menus. After some research, I found a code snippet that I modified to suit my needs. Below is the updated code:

#main-menu {
    background-color: #2E3039;
}

.list-group-item {
    background-color: #2E3039;
    border: none;
}

a.list-group-item {
    color: rgb(22, 21, 21);
}

a.list-group-item:hover,
a.list-group-item:focus {
    background-color: #43D5B1;
}

a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
    color: #FFF;
    background-color: #43D5B1;
    border: none;
}

.list-group-item:first-child,
.list-group-item:last-child {
    border-radius: 0;
}

.list-group-level1 .list-group-item {
    padding-left:30px;
}

.list-group-level2 .list-group-item {
    padding-left:60px;
}
<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="side2.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <div class="row">
          <div class="col-md-3">
              <!-- column1, Vertical Dropdown Menu -->
              <div id="main-menu" class="list-group">
                  <a href="#sub-menu" class="list-group-item active" data-toggle="collapse" data-parent="#main-menu">Item 1 <span class="caret"></span></a>
                  <div class="collapse list-group-level1" id="sub-menu">
                      <a href="#" class="list-group-item" data-parent="#sub-menu">Sub Item 1</a>
                      <a href="#" class="list-group-item" data-parent="#sub-menu">Sub Item 2</a>
                      <a href="#sub-sub-menu" class="list-group-item" data-toggle="collapse" data-parent="#sub-menu">Sub Item 3 <span class="caret"></span></a>
                      <div class="collapse list-group-level2" id="sub-sub-menu">
                          <a href="#" class="list-group-item" data-parent="#sub-sub-menu">Sub Sub Item 1</a>
                          <a href="#" class="list-group-item" data-parent="#sub-sub-menu">Sub Sub Item 2</a>
                          <a href="#" class="list-group-item" data-parent="#sub-sub-menu">Sub Sub Item 3</a>
                      </div>
                  </div>
                  <a href="#" class="list-group-item">Item 2</a>
                  <a href="#" class="list-group-item">Item 3</a>
                  <a href="#" class="list-group-item">Item 4</a>
                  <a href="#" class="list-group-item">Item 5</a>
              </div>    
          </div>
          <div class="col-md-9">
              <!-- column 2, content goes here... -->
          </div>
      </div>
  </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

I later attempted to add sub-sub menus to other sub menus as well by modifying the HTML file. However, when collapsing "Sub Item 1," it also collapses "Sub Item 2" and "Sub Item 3." Can someone assist me in adjusting the code so that only "Sub Item 1" collapses without affecting the other sub items? Thank you.

htmlcssbootstrap-4

Answer №1

To prevent all submenus from activating simultaneously, make sure to assign a unique number to each sub-sub-menu id within your HTML code. This way, each submenu will be individually activated instead of all activating at once due to sharing the same id.

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="side2.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
    <style type="text/css">
    .column
        {
            float: right;
            position: relative;
        }
    </style>
    
  </head>
  <body>
    <div class="container">
      <div class="row">
          <div class="col-md-3">
              <!-- column1, Vertical Dropdown Menu -->
              <div id="main-menu" class="list-group">
                  <a href="#sub-menu" class="list-group-item active" data-toggle="collapse" data-parent="#main-menu">Item 1 <span class="caret"></span></a>
                  <div class="collapse list-group-level1" id="sub-menu">
                    <a href="#sub-sub-menu1" class="list-group-item" data-toggle="collapse" data-parent="#sub-menu">Sub Item 1 <span class="caret"></span></a>
                    <div class="collapse list-group-level2" id="sub-sub-menu1">
                        <a href="#" class="list-group-item" data-parent="#sub-sub-menu1">
                            <div class="column">
                                Sub Sub Item 1
                            </div>
                            <div style="clear: both;"></div>
                        </a>
                        <a href="#" class="list-group-item" data-parent="#sub-sub-menu1">
                            <div class="column">
                                Sub Sub Item 2
                            </div>
                            <div style="clear: both;"></div>
                        </a>
                        <a href="#" class="list-group-item" data-parent="#sub-sub-menu1">
                            <div class="column">
                                Sub Sub Item 3
                            </div>
                            <div style="clear: both;"></div>
                        </a>
                    </div>
                      
                      <a href="#sub-sub-menu2" class="list-group-item" data-toggle="collapse" data-parent="#sub-menu">Sub Item 2 <span class="caret"></span></a>
                      <div class="collapse list-group-level2" id="sub-sub-menu2">
                          <a href="#" class="list-group-item" data-parent="#sub-sub-menu2">Sub Sub Item 1</a>
                          <a href="#" class="list-group-item" data-parent="#sub-sub-menu2">Sub Sub Item 2</a>
                          <a href="#" class="list-group-item" data-parent="#sub-sub-menu2">Sub Sub Item 3</a>
                      </div>
                      <a href="#sub-sub-menu3" class="list-group-item" data-toggle="collapse" data-parent="#sub-menu">Sub Item 3 <span class="caret"></span></a>
                      <div class="collapse list-group-level2" id="sub-sub-menu3">
                          <a href="#" class="list-group-item" data-parent="#sub-sub-menu3">Sub Sub Item 1</a>
                          <a href="#" class="list-group-item" data-parent="#sub-sub-menu3">Sub Sub Item 2</a>
                          <a href="#" class="list-group-item" data-parent="#sub-sub-menu3">Sub Sub Item 3</a>
                      </div>
                  </div>
                  <a href="#" class="list-group-item">Item 2</a>
                  <a href="#" class="list-group-item">Item 3</a>
                  <a href="#" class="list-group-item">Item 4</a>
                  <a href="#" class="list-group-item">Item 5</a>
              </div>    
          </div>
          <div class="col-md-9">
              <!-- column 2, content goes here... -->
          </div>
      </div>
  </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

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

The Laravel href link will fail to work when the URL does not include the string 'http'

I am encountering an issue with a particular hyperlink tag <a href="{{ $organization->website }}">Link</a> When the URL in $organization->website does not start with http:// or https://, the link fails to direct me properly. Instead, i ...

htmllaravelhttphref

Issue with Expo Google Places Autocomplete: ListView not clickable

I am currently encountering an issue with the GooglePlacesAutocomplete feature. When I input the address query, such as "São C," the 'listView' returns options like "São Caetano, São Paulo ...", however, when I attempt to select an option from ...

cssreact-nativeexpogoogle-places-autocomplete

Is there a feature in JavaScript that allows for the creation of URLs?

I created an index view displaying cards (like playing cards) in a grid using BootStrap. Each card is within its own div element, and I implemented a jQuery click handler for each div to open a details page when clicked. The redirect from the index to the ...

javascriptjqueryhtml

Achieving CSS transition effects using the .appendChild function in JavaScript

When using the mouseenter event, I have a JavaScript function applied to an svg path element: const fadeIn = (event, locale) => { event.target.style.fill = 'hwb(' + (120 - score[locale] * 1.2) + ' 0% 0% / 1)' } This function wor ...

javascriptcssvue.jssvgvuejs3

Can uniform columns be created in separate HTML elements?

Looking to create a uniform list in HTML, where the columns inside each panel line up perfectly. See the desired layout: https://i.sstatic.net/FbbPu.png In this example, Col_1 has a width of "BBBBB", as it is the widest content in that column, ...

javascripthtmlcss

What is the proper way to showcase an element positioned absolutely within a Dialog window using material-ui?

My current project involves using React, TypeScript, StyledComponent, and MaterialUI. I am looking to add a button to a Dialog window (material-ui) similar to the design shown in this example image. However, when I apply position: absolute to the button, ...

cssreactjsmaterial-ui

Utilize the <a> element as a button to submit the data form

I am looking to transfer data from a form to another PHP page without using a button within the form itself. Instead, I have placed a separate button outside of the form for submission. How can I achieve this by sending the form data to the other page? Bel ...

javascriptphpjqueryhtmlforms

Adding a contact form to a slider: A step-by-step guide

Currently, I am faced with the challenge of placing my form on a slider in such a way that the slider appears to be running in the background of the form. When using position absolute, I find myself having to apply excessive margins and top pixels due to t ...

javascriptjqueryhtmlcsstwitter-bootstrap

Steps for creating a resizable and automatically hiding side menu

I am working on a side menu that can be resized, and I want it to collapse (set to zero width) when it is empty. I have considered implementing one of these features individually, but I'm not sure how to make both work together. Is there a way to ad ...

javascriptcssvue.js

My goal is to develop a table that is both able to be resized and easily repositioned

I've been working on a project to develop an interactive table that can be manipulated, resized, and repositioned within a canvas. The code snippet below shows my attempt at creating this table on the canvas: var canvas = document.getElementById("dra ...

javascripthtmlcanvas

Issue occurred while trying to update the MySQL database with an HTML form and Ajax integration

I am facing an issue with my form that uses a drop-down box and a hidden form field to send information to a PHP page. Everything works as expected when I submit the form directly to the PHP page, but when I try using AJAX to pass the information, it doesn ...

htmlajax

Tips for adding a red dot at the top-right corner of a necessary HTML input label, similar to an asterisk

Is there a way to replace the asterisk with a dot in an HTML label for a required input? The dot should be positioned in the top-right corner similar to where the asterisk would typically be. ...

htmlcss

What changes should I make to my code in order to incorporate an additional level of submenu to my CSS-based dropdown menu?

Hello and thank you for your help, I currently have some CSS code that is working well for 3 levels of dropdown menus, but I am now in need of it to also support a 4th level. When I try to add the extra level by copying the 3rd level code and making adjus ...

htmlcss

Troubleshooting Issues with Bootstrap Carousel Functionality

I'm facing some difficulties with the Bootstrap carousel on my website. I have followed all the instructions carefully and researched for solutions, but unfortunately, my carousel is not functioning properly. It seems like everything is set up correct ...

jqueryhtmlcarousel

Adjusting my navbar to dynamically resize with the changing window dimensions

Seeking guidance on creating a responsive navbar. Currently, I've successfully adjusted the bar's size based on monitor resolution, but the buttons remain static in size. I experimented with using %, vm, and vh, but suspect that there might be a ...

htmlcss

Utilize focusout and onclick events on multiple components at the same time

Currently, I am in the process of coding an Autocomplete feature from scratch in Vue, but I am encountering a challenge when it comes to selecting an option from the dropdown menu. I have set it up so that the dropdown is shown when the input is clicked ...

javascripthtmlvue.js

Add a pair of assorted div elements to a shared container

I have two different sections with classes named "red" and "blue". By default, these sections are hidden. I want to duplicate them and display them in a single container named "cont". The red button appends the red section and the blue button appends the b ...

javascriptjqueryhtmlcss

The directive code takes precedence over the controller code and is executed first

A custom directive has been implemented and is utilized as shown below: <div car-form car="car" on-submit="createCar(car)"></div> This directive is used on both the new and edit pages, each with its own controller. The EditCarController retri ...

javascripthtmlangularjsangularjs-directive

Ways to identify if the text entered in a text area is right-to-left justified

Within a textarea, users can input text in English (or any other left-to-right language) or in a right-to-left language. If the user types in a right-to-left language, they must press Right-shift + ctrl to align the text to the right. However, on modern O ...

javascriptjqueryhtmlcssright-to-left

Using a JavaScript script in my HTML alongside Vue.js is not possible

Hello there! I recently created a Node.js server and now I'm trying to display an HTML file that contains a Vue script which loads data using another method written in a separate JS file. However, when I attempt to load my HTML file in the browser, ...

javascripthtmlnode.jsvue.js