Show active Main Menu and sub Menu through the use of CSS and javascript

I currently have left side menus.

<div class="panel">
    <div class="panel-heading panel-red" role="tab" id="headingDash" style="">
        <a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseDash" aria-expanded="true" aria-controls="collapseDash" class="menuList" style="">
            <i class="fa fa-dashboard" style=" padding: 15px;color: #fff"></i>
            Dashoboard
        </a>
    </div>
    <div id="collapseDash" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingDash">
        <div class="panel-body">
            <ul class="nav">
                <li class="subMenuList active" style=" ">
                    <a href="#" style="">Dashboard-1</a>
                </li>
                <li class="subMenuList" style="">
                    <a href="#" style="">Dashboard-2</a>
                </li>
            </ul>
        </div>
    </div>
</div>

My goal is to showcase the active main menu and sub menus upon click. I have successfully implemented this for static main menu and sub menus.

Here is my Fiddle link: https://jsfiddle.net/whv76xd0/6/

How can I achieve this dynamically on click?

Working Fiddle link

javascriptjqueryhtmlcss

Answer №1

Here's a solution for you.

$(document).ready(function(){
    $(document).on("click", ".subMenuList", function(){
        $('.panel-heading').removeClass('panel-red');
        $('.subMenuList').removeClass('active');
      $(this).closest('.panel').find('.panel-heading').addClass('panel-red');
      $(this).closest('.panel').find('.panel-heading').removeClass('panel-head');
      $(this).addClass('active');
    })
})

Answer №2

Hey @pavan, if you're looking to manage dynamic submenu links, give this jQuery function a shot:

$(document).ready(function(){
    $(document).on("click",".subMenuList",function(){
      alert();
    })
})

You can customize the code inside the function to perform any action you need when someone clicks on a submenu.

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

Is there a way to apply the 'absolute' or 'fixed' with a width of 100% to the parent div specifically, rather than to the window size?

I would like to create a banner similar to the one shown here: https://i.sstatic.net/SZLr9.png I am attempting to achieve this using 'absolute' or 'fixed' positioning. However, when I tried using 'left: 0 right: 0 top: 0', i ...

cssreactjsmaterial-ui

Creating a showcase page that generates its own code: A guide

If you have created a demo page for your product and want to include a button at the bottom that, when clicked, displays the source code of the demo above, how can you accomplish this in an elegant way? ...

javascripthtmlselfdemo

Can one button be clicked to trigger the activation of another button through a click?

Just as the title suggests, I am wondering how to make this happen? Any guidance would be greatly appreciated! $('.notVisible').click (function(){ alert("I'm the invisible button") }); $('.visible').click (function(){ al ...

javascriptjquery

Animating a child element while still keeping it within its parent's bounds

I have researched extensively for a solution and it seems that using position: relative; should resolve my issue. However, this method does not seem to work in my specific case. I am utilizing JQuery and AnimeJS. My goal is to achieve the Google ripple eff ...

javascriptjqueryhtmlcssanime.js

Present a pop-up notification box with a countdown of 30 seconds prior to the expiration of a session timeout in JSF

Our task is to create a timeout window that appears 30 seconds before the session expires. If the user remains inactive, they will be automatically redirected to the home page. We already have the maximum allowed duration of inactivity defined. I would l ...

javajavascriptjqueryjsf-2

JustGage error: Unable to locate element with ID 0 in AngularJS

I developed a custom directive for the JustGage plugin, here is how it looks: function justGage() { return { restrict: 'E', replace: true, scope: { universalId: '@', ...

javascriptangularjsjustgage

Canvas with a button placed on top

I am working with a canvas and trying to position an HTML element over it using CSS. My goal is for the button to remain in place on the canvas even when resizing the entire page. Here is the code I am currently using. https://jsfiddle.net/z4fhrhLc/ #but ...

javascripthtmlcss

Even though I have the image button's ID, I am unable to successfully click on it

I am facing an issue where I can't seem to click on an image button even though I know its ID: driver.findElement(By.id("its Id")).click() Unfortunately, I cannot provide the website link as it is not a public website. However, I have pasted the HTM ...

javascripthtmlseleniumselenium-webdriverselenium-chromedriver

Does the content from an AJAX request get loaded if you flush it using ob_flush()?

Imagine this scenario, where we are making an AJAX request and inserting the result inside a div with the id of "result". On the backend, the script is using ob_flush() to send the header but not terminating the request until it's explicitly terminat ...

phpjavascriptjqueryajaxoutput-buffering

Transferring information from Django to JavaScript

Is it possible to pass data from Django views to Django templates using variables? For example, if I have a list called 'listone', can I somehow transfer this data to a JavaScript list created in the view? Are there alternative methods for achiev ...

javascriptdjango

An error occurred while trying to update with Webpack Dev Server: [HMR] Update failed due to an issue fetching the update manifest,

I encountered an issue in the browser console while attempting to live reload / HMR on Webpack. The error arises after saving a file following a change. [HMR] Update failed: Error: Failed to fetch update manifest Internal Server Error Could the failure b ...

javascriptnode.jswebpack

The API request is experiencing delays due to the large dataset of 250,000 records

Utilizing API calls to retrieve data for the frontend is essential, but with a database table containing 250,000 rows, efficiency becomes a concern. In my .NET Core application, I implement the following query: IQueryable<Message> query = context.Me ...

javascriptsql.net-coreentity-framework-6

What is causing the input tag and button tag to appear on separate lines instead of together?

https://i.sstatic.net/AQiw3.png Here is my HTML and CSS code: <!DOCTYPE html> <html> <head> <title>assignment1</title> <meta charset="utf-8"> <meta name = "description" content="assignment"> <meta name = ...

htmlcss

Adapting the colors of various elements throughout the entire webpage

My goal is to incorporate color-switch buttons on my webpage. When these buttons are clicked, I want the existing colors to change to different shades. However, my challenge lies in the fact that these colors are used for various elements such as backgro ...

javascriptjqueryhtmlcsscolors

Issue with React Material UI: Box is not scrollable vertically

I've been grappling with this issue for hours and could really use some assistance. My goal is to create a Chat component that allows vertical scrolling, but I've hit a roadblock. Here's a simplified version of the problem on Codesandbox: ht ...

cssreactjsmaterial-ui

Challenges compiling 'vue-loader' in Webpack caused by '@vue/compiler-sfc' issues

The Challenge Embarking on the development of a new application, we decided to implement a GULP and Webpack pipeline for compiling SCSS, Vue 3, and Typescript files. However, my recent endeavors have been consumed by a perplexing dilemma. Every time I add ...

javascriptvue.jswebpackvuejs3

Retrieve the div element using the jQuery selector for both the id and class

This is the structure I have set up: <div id="list_articles"> <div id="article"> <label>Select:</label><input type="checkbox" class="checked_art" id="1001" /> <div id="hide" style="display:none;" class="1001"> ...

jqueryclasshtmlshow

Achieving success with the "silent-scroll" technique

I've been struggling to implement the 'scroll-sneak' JavaScript code for quite some time now. This code is designed to prevent the page from jumping to the top when an anchor link is clicked, while still allowing the link to function as inte ...

javascriptjqueryhtmlcss

Is it possible to get this numeric input working properly? [HTML5]

How can I create a button that generates a random number between 0 and a specified value x when clicked? Currently, my implementation is returning NaN instead of the desired random number. function generateRandomNumber() { document.getElementById("num ...

html

The ajax code is failing to retrieve the data from the table and populate it in the

hi guys i have an issue on ajax. where ajax can't work to take the data of second rows. This's code in model function getdtbarang($barcode = FALSE) { if ($barcode === FALSE) { $query = $this->db1->get(&a ...

javascriptphpajax