Issue with Bootstrap's collapsed navbar remains unresolved even after interaction with sub menu

When using Bootstrap, I encountered an issue where the submenus are not staying collapsed after expanding a menu and clicking on a submenu. To address this, I modified the code from class="collapse list-unstyled" to class="collapse list-unstyled show". This resolved the issue of menus collapsing but not shrinking when navigating to the next main menu.

<?php include('header.php'); ?>
    <div class="wrapper">
        <!-- Sidebar  -->
        <nav id="sidebar">

            <ul class="list-unstyled components top_admin">

            </ul>
            <ul class="list-unstyled components">
                <li>
                    <a href="dashboard.php" data-toggle="collapse" aria-expanded="false" >
                        <i class="fa fa-tachometer" aria-hidden="true"></i>                     
                        <span>DASHBOARD </span>                                                     
                    </a>
                </li>               
                <li>
                    <a href="#my_note1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                        <i class="fa fa-hand-o-up" aria-hidden="false"></i>

                        <span>My Notes1</span>
                    </a>
                    <ul class="collapse list-unstyled " id="my_note1">
                        <li>
                            <span class="small_menu"><a href="page1.php">CN</a></span>
                            <a class="la_cls" href="page1.php">Create Note</a>                          
                        </li>

                    </ul>
                </li>               
                 <li>
                    <a href="#my_note2" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                        <i class="fa fa-hand-o-up" aria-hidden="false"></i>

                        <span>My Notes2</span>
                    </a>
                    <ul class="collapse list-unstyled " id="my_note2">
                        <li>
                            <span class="small_menu"><a href="page1.php">CN</a></span>
                            <a class="la_cls" href="page1.php">Create Note</a>                          
                        </li>
                        <li>
                            <span class="small_menu"><a href="#">SN</a></span>
                            <a class="la_cls" href="#">Search Notes</a>                              
                        </li>                       
                    </ul>
                </li>             
            </ul>

        </nav>

  </div>

I am seeking assistance in ensuring that after clicking a submenu, it remains collapsed until another main menu is clicked. Any suggestions on how to solve this issue would be greatly appreciated. Thank you in advance.

javascriptbootstrap-4navbar

Answer №1

<header role="banner" id="top" class="navbar navbar-static-top">


  <div class="navbar-header">
    <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="animbrand"><a href="#" class="navbar-brand">M-Panel</a></div>
  </div>

  <div class="collapse navbar-collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class=""><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
      <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-list-alt"></span> Offers <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li class=""><a href="#"><span class="glyphicon glyphicon-align-justify"></span> All Offer Details</a></li>
          <li class=""><a href="#"><span class="glyphicon glyphicon-pencil"></span> Create Offer ID</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-book"></span> Reports <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li class=""><a href="#"><span class="glyphicon glyphicon-align-justify"></span> Click Report</a></li>
          <li class=""><a href="#"><span class="glyphicon glyphicon-align-justify"></span> Live Report</a></li>
          <li class=""><a href="#"><span class="glyphicon glyphicon-align-justify"></span> This Month Revenue</a></li>
          <li class=""><a href="#"><span class="glyphicon glyphicon-align-justify"></span> Last Month Revenue</a></li>
          <li class=""><a href="#"><span class="glyphicon glyphicon-align-justify"></span> News Reports</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-user"></span> Accounts <b class="caret"></b></a>
        <ul class="dropdown-menu"> 
          <li class=""><a href="#"><span class="glyphicon glyphicon-align-justify"></span> View Accounts</a></li>
          <li class=""><a href="#"><span class="glyphicon glyphicon-pencil"></span> Add Account</a></li>
        </ul>
      </li> 
    </ul> 

    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" >
          <span></span>
          <small>Welcome,</small>   User <b class="caret"></b></a>
        <ul class="dropdown-menu"> 
          <li><a href="#"><i class="glyphicon glyphicon-off"></i> Logout</a></li>
        </ul>
      </li> 
    </ul>
  </div>
</div>

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

How can I create a JSON string that exactly matches the data source needed for a pie chart? Any tips

received JSON string: "{Date:'15/05/2015',y:'6'}, {Date:'01/08/2015',y:'6'}, {Date:'02/08/2015',y:'6'}, {Date:'08/08/2015',y:'72'}, {Date:'09/08/2015',y:&apo ...

javascriptjqueryajaxchartshighcharts

Preserve the values of checkboxes throughout the entire website by utilizing localStorage

Example A functionality in the example allows users to add images to a container by clicking on checkboxes. However, there is an issue where when a checkbox is checked on one page to store an image, and then another checkbox is checked on a different page ...

javascriptjqueryhtmllocal-storage

Combining NodeJS with PHP: A Seamless Integration

They say NodeJS is perfect for creating real-time chat applications and I'm eager to add a chat feature to my website. Right now, I have the design ready and need to work on the back-end code. However, when I use socket.io + express, things don' ...

javascriptphpnode.jsexpresssocket.io

Using AngularJS to integrate a function within a component

Hey there, I am facing an issue trying to call a function that is in a component. Let me share the code snippet from my component buttonsController: (function(){ "use strict"; angular .module('my') .component('myButton&ap ...

javascriptangularjs

Designing templates for websites and applications using node.js

Simplified Question: As I delve into improving my skills with node.js, I'm exploring the concept of templating. How would using node to serve one HTML file and loading page-specific information through AJAX/sockets impact performance and design princ ...

javascripthtmlmodel-view-controllernode.js

Highlighting the incorrect image when clicked on in the BS4 carousel indicator (active)

I am currently working on a Bootstrap 4 carousel and using Jquery to fetch and display images. The images are named from 1.jpg to 72.jpg. Everything seems to be working fine except that when I click on an image, the indicator thumbnails highlight the wrong ...

htmljquerycssbootstrap-4carousel

Enhance User Experience with React JS Multi-Select Dropdown Feature

I am dealing with 4 select dropdowns. The values selected should not be available in the remaining dropdown lists. Here is an overview of my state: this.state = { selectedDropdownArray: {}, dropdownArray: ['select', '1', &apos ...

javascriptreactjsselectdrop-down-menu

React useEffect appended script not activating

I'm having trouble loading a script that should generate an iframe and display a weather widget upon trigger. I am able to append the script correctly, but it doesn't seem to be called and does not create the iframe. Even when I directly add the ...

javascriptreactjsreact-hooksuse-effect

What method can I use to modify the object's keys based on certain conditions in ES6/React?

How can I dynamically change the value of an object's keys based on specific conditions? What is the most effective way to structure and implement this logic? Data const newData = { id: 111, name: "ewfwef", description: "Hello&qu ...

javascriptreactjsecmascript-6react-hooks

Working with JavaScript and making AJAX calls to interact with PHP backend

Having trouble with this code, it's not working as expected. I want to pass the value when I select an option from the dropdown menu, process the data using onChange event and display the value in the tag. <label for="headmark" class="lbl-ui selec ...

javascriptajax

Adding an element and value to a JavaScript array in IE7

When declaring an array, I can do it like this: var positions = []; Alternatively, I can also declare it like this: var positions = new array(); Both methods are acceptable. Later in the script, I add a value like this: positions[0].top = 0; Everyth ...

javascriptarraysinternet-explorer-7

Is it possible to link an asp.net dropdownlist to javascript/jquery?

I'm looking to bind an asp.net dropdownlist using javascript/jquery. I am retrieving the data from a web method using jquery ajax, so I want to avoid postback at this point. However, I still need to be able to do postback and save all the data using s ...

javascriptasp.netjquerydrop-down-menu

Ways to assign a CSS class specifically for images

.calendarList { background-image: url('/resource3/hpsc/common/images/calendar.png'); background-position: 135px 50%; background-repeat: no-repeat; cursor:pointer; } <input type="text" id="toDatepicker" class="cal ...

javascriptjquerycss

Strategies for Effectively Managing Null Checks in Your JavaScript Project

When retrieving data from the BE API, it is in the format: { "details": { "address": { "street": "123/4", "city": "Banglore" } } } In our React project, we access this dat ...

javascriptnode.jsreactjsreact-native

Using AngularJS in conjunction with Ruby on Rails is causing compatibility issues

Trying to implement Angular with Ruby on Rails is presenting some challenges. While simple expressions like 1+1 work fine, binding a number or string to a scope seems to be causing issues. I am looking for suggestions on how to resolve this problem. app. ...

javascriptruby-on-railsangularjsruby

Ignoring CSS transitions by changing the width property in JavaScript’s element.style

When attempting to create a smooth progress bar animation by adjusting the width using document.querySelector('#mydiv').style.width = '20%', I noticed that the new width is updated instantly rather than transitioning smoothly. It seems ...

javascriptcss

"Utilizing the splice method to insert an element at specified indexes within an

const list = [] const obj = { name: '', mobile: '' } _.forEach(errors, (value, key) => { // eslint-disable-next-line no-debugger // debugger const field = key. ...

javascriptvue.jsnuxt.js

Is it possible to apply styles to javascript elements without relying on img class? Additionally, how can I incorporate an onclick button while maintaining a fully functional navigation bar?

My current project involves creating an interactive collage where users can click around and have pictures pop up at the clicked location. The functionality works as intended, but now I'm facing issues with the navigation bar not being clickable. Addi ...

javascripthtmlcss

Press the Text and Alter Text with React

I'm having an issue with the onClick event using React hooks. My goal is to have the text change to a different one when the user clicks, and then revert back to the original text on another click. For example, clicking "Change First" should switch it ...

javascriptreactjsreact-hooks

Switch out the current R shiny htmlwidget data for updated data

Recently, I encountered an issue with a htmlwidget in one of my R shiny applications. Each time the widget render function was called multiple times, it failed to replace the existing data with new data. This bug caused the old data to linger and the new d ...

javascriptrshinyhtmlwidgets