How to collapse one section while expanding another in Bootstrap 4?


                    const cur_url = window.location.href.split('#')[0].split('?')[0],
                        body = $('body'),
                        menu_toggle = $('.menu-toggle'),
                        sidebar_menu = $('#sidebar-menu');

                    initSidebar = function() {
                        let openUpMenu = function() {
                            sidebar_menu.find('li').removeClass('active active-sm');
                            sidebar_menu.find('li ul').slideUp();
                        }

                        sidebar_menu.find('a').on('click', function(ev) {
                            let $li = $(this).parent();
                            $li.is('.active') ? $li.removeClass('active active-sm') : $li.addClass('active');
                        });

                        // toggle small or large menu
                        menu_toggle.on('click', function() {
                            if (body.hasClass('nav-md')) {
                                sidebar_menu.find('li.active ul').hide();
                                sidebar_menu.find('li.active').addClass('active-sm').removeClass('active');
                            } else {
                                sidebar_menu.find('li.active-sm ul').show();
                                sidebar_menu.find('li.active-sm').addClass('active').removeClass('active-sm');
                            }

                            body.toggleClass('nav-md nav-sm');
                        });
                    };

                    $(document).ready(function() {
                        initSidebar();
                    });
                
            

                    .left_col {
                        background: #2A3F54;
                    }

                    /* CSS Rules Go Here */
                
            

Additional context goes here. You can mention specific issues, requirements, or challenges you are facing with the current code implementation. Provide a clear description of what you need help with.

You can access the working example code on this link: https://jsfiddle.net/dmilos89/cyxj7f98/

Answer №1

    When a link in the sidebar menu is clicked, it will perform the following actions:
        - Remove the 'active' and 'active-sm' classes from any active 'li's in the same 'ul'
        - Add the 'active' and 'active-sm' classes to the clicked 'li'
        
        If the clicked link has a class of 'nav-link':
        - Collapse all child menus
        - Expand the child menu of the clicked 'li'

Is this what you were looking for?

Edit: I made some adjustments in my version, such as removing the data-toggle="collapse" attribute. It seems to be functioning according to your explanation.

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

Elements that have been loaded dynamically through .load() cannot be queried

I currently have a main HTML file that contains several iframe elements stored in external HTML files. These iframes are only loaded when the user clicks on specific buttons in the navigator. $('#carousel_01').load('content_01.html'); ...

The grid expands to cover the entire width of the browser

Hello everyone, I am a newbie when it comes to JavaScript and CSS. I am in need of a code, whether it be JavaScript or CSS, that will allow me to stretch out a grid layout measuring 5 x 2 along with pictures to completely cover the width of the browser wi ...

Guide on determining the total count based on a specific condition with the help of jQuery

Using AJAX, I have successfully retrieved all status values such as Active, ACTIVE_DRAFT, and Pending. However, I only want to select the statuses that are equal to ACTIVE. To do this, I am using an if condition which is working fine. After filtering by st ...

Tips on changing the outline color by clicking

I'm working on a simple code where I need to change the outline color when a user clicks on a text field. <input type="text" id="box1" /> <input type="password" id="box2" /> <input type="email" id="box3" /> <input type="submit" ...

Adjust the height of the container div for the carousel according to the length of the text displayed

My image carousel features description content positioned on the right for wide-screen windows. However, I want the description to shift below the images when the browser window reaches a certain breakpoint. The challenge I am facing is that the height of ...

Center the "td" elements within a table

I am struggling with a design that involves two tables placed side by side within a main table. <table> <tr> <td style="width: 50%"> <table id="table1"> <tr><td></td></tr> <tr><td></t ...

How to create a full-screen 2x2 grid layout using divs in HTML

I am attempting to create a grid layout of 4 divs arranged in a 2x2 configuration. I would like to have a 1 pixel border between these divs, similar to the following structure: 1|2 -+- 3|4 Each div should have equal size and collectively fill the entire ...

Is there a way to refresh a specific section of a view using an Ajax response in Yii version 1.1.14?

In this scenario, upon loading the page initially, it populates data from a Yii widget by utilizing: $this->widget(blahblabhablha) Within this widget, there exists a clickable dropdown menu. Upon selecting an option, it triggers an ajax call. Subseque ...

Adjusting CSS using JQuery based on scroll position

I am attempting to dynamically change a CSS style depending on the viewer's position on the page. Despite researching numerous similar threads online, I have not been able to get this code to work as intended. Any assistance would be greatly appreciat ...

The callback function in Ajax is returning an undefined response, causing an Uncaught Reference

Code: query = "http://localhost:8080/working_login.php?name=" + name + "&password=" + pass; console.log(query); $.ajax({ type: "GET", url: query, dataType: "script", success: function(data){ console.log(data); con ...

Customizing a Tab Bar with HTML and CSS - Adjusting the text color for the selected tab

When creating a set of radio buttons with labels using HTML, the challenge arises when the active tab appears in blue with white text while the inactive tabs have the same white text making them invisible until highlighted. The goal is to change the color ...

The code trigger is malfunctioning: Unhandled Jquery error detected

Currently, I am attempting to activate the first anchor element of the unordered list using jQuery. However, I keep encountering an error that says Uncaught TypeError: Cannot read property 'type' of undefined. I am unsure why this is happening an ...

How can I prevent a block of white space from collapsing in CSS, without relying on the presence of a DIV element?

I am facing an issue with maintaining space above the Title in my design. The design includes elements like Title, Description, and Image. The challenge is to ensure that there is a 20px space above the Title, as shown in the example below: https://i.ssta ...

Having trouble importing XML data from an external file with jQuery

Attempting to import external XML with the code below is proving unsuccessful $( document ).load( "data.xml", function( response, status, xhr ) { console.log( xhr.status + " " + xhr.statusText ); }); Both data.xml and js files are in the ...

What is the best way to vertically center these two boxes within the confines of this red box?

Is there a way to vertically align the white and green boxes inside the red box? I'm aiming for a layout similar to the one shown in the image below. Your help is greatly appreciated! Check out this demo on jsfiddle. <style> *{ padd ...

Adjust the menu scrollbar position to the right or limit scrolling to within the menu area

$(function() { "use strict"; $(".navbar-toggler").on("click", function() { $(".navbar-toggler").toggleClass("collapsed"); $(".offcanvas-collapse").toggleClass("open"); let menuposition = $("#toggler").offset().left + $("#toggler").width() + ...

Numerous Divs Expanding to Fit Window Size

I successfully managed to make one div expand to the size of the window, filling the screen completely. However, I am facing an issue where the other divs are overlapping each other and only displaying thing 3. How can I ensure that they do not overlap and ...

"Using Flask to send form data, including text areas, files, and more with the help of JavaScript, JQuery, or Ajax

I want to utilize JQuery/Javascript/Ajax to send the content of a form (including text area, files, etc.) to a specific function in my Flask application. <form action='' method="post"> <label for="label">Example</label>& ...

Problem with Express server not fetching or applying public stylesheet

As I delve into the world of serving pages with node, express, and ejs, I encountered an issue with linking a stylesheet to my index.ejs file using a public folder. Despite setting up the link correctly in the HTML code, the styles were not loading when I ...

Creating two columns with separate scrollbars in Responsive Bootstrap is a useful feature for organizing content in a visually

Is there a way to create 2 columns with scrollbars using Bootstrap when a button is clicked? Here's what I'm trying to achieve: My webpage consists of a row-fluid div that contains the main-column div with main-content and extra-content. There&a ...