I am interested in learning how to retrieve the page URL in order to trigger the opening of a menu in my sidenav bar

This is my navigation bar. I am trying to use JavaScript or jQuery to retrieve the current page's URL and open the corresponding dropdown container. I want to display the relevant section of the side navigation based on the URL. I have tried writing this JavaScript code, but it doesn't seem to be working.

 $(function() {
    if (window.location.href.indexOf("home") > -1)
      $('.dropdown-toggle.home').dropdown('toggle');
    else if (window.location.href.indexOf("FRAMEWORKS") > -1)
      $('.dropdown-toggle.FRAMEWORKS').dropdown('toggle');
    else if (window.location.href.indexOf("Strategize phase") > -1)
      $('.dropdown-toggle.Strategize phase').dropdown('toggle');
    else if (window.location.href.indexOf("Standardize phase") > -1)
      $('.dropdown-toggle.Standardize phase').dropdown('toggle');
    else if (window.location.href.indexOf("Implement phase") > -1)
      $('.dropdown-toggle.Implement phase').dropdown('toggle');
    else if (window.location.href.indexOf("Integrate phase") > -1)
      $('.dropdown-toggle.Integrate phase').dropdown('toggle');
    else (window.location.href.indexOf("About") > -1)
      $('.dropdown-toggle.ABOUT').dropdown('toggle');
  });

Home

      <button id class="dropdown-btn FRAMEWORKS" href="#">FRAMEWORKS    <i class="fa fa-caret-down"></i></button>


    <div class="dropdown-container">
      <div class="sub">
      <a href="#">Framework</a>

      <button class="dropdown-btn" href="#">Strategize phase<i class="fa fa-caret-down"></i></button>
      <div class="dropdown-container">
        <div class="subSub">
        <a href="#">Enterprise Innovation Audit Canvas</a>
        <a href="#">Pre-Audit Business Definition Questions</a>
        <button class="dropdown-btn" href="#">Tools and Canvases for the Enterprise Innovation Capability Audit<i class="fa fa-caret-down"></i></button>
          <div class="dropdown-container">
            <div class="subSubSub">
          <a href="#">Enterprise Innovation Maturity Canvas</a>
          <a href="#">Enterprise Innovation Maturity Evaluation Grid Canvas</a>
          <a href="#">Enterprise Innovation Maturity Road map Canvas</a>
        </div>
      </div>
          </div>
      </div>
    </div>
    <button class="dropdown-btn" href="#">Standardize Phaze<i class="fa fa-caret-down"></i></button>
      <div class="dropdown-container">
        <div class="subSub">
              <button class="dropdown-btn" href="#">Innovation Culture Fostering Approach<i class="fa fa-caret-down"></i></button>
                <div class="dropdown-container">
                  <div class="subSubSub">
                      <a href="#">Innovation Fostering Approach Summary</a>
                      <a href="#">4I- Inspire, Ideate, Implement and Impact Enterprise Innovation Fostering Model</a>
                      <a href="#">Enterprise Team Inventiveness Persona</a>
                    </div>

                </div>
javascripthtmljquerycss

Answer №1

I'm not entirely sure of the goal behind your inquiry, but I have a code snippet that may be relevant to your question and is based on bootstrap:

Check out this JSFiddle link for more information.

If you're looking to learn more about it, you can visit this online resource.

Before implementing it in your own environment, ensure that your URL includes a specific word that can be identified using:

window.location.href.indexOf(...)

For example: http://localhost/FRAMEWORKS.html

In this scenario, your 'Frameworks' dropdown will display once your document loads successfully.

 $(document).ready(function(){
  if (window.location.href.indexOf("FRAMEWORKS") > -1){
     $('#my-id-FRAMEWORKS').dropdown("toggle");
  }
 });

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

Switching the background image with a single click and reverting it back with a double click using jquery

I am working on a project with multiple div elements which need their background images to change upon clicking and revert back to the original image when clicked again. Below is the CSS code for one of the divs, including its Class and ID: .tab_box { wid ...

jquerycssimageonclicktoggle

Creating a secure ZIP file with password protection using node.js

Currently, I am faced with the challenge of creating a ZIP file in node.js with password protection. Despite using the "node-zip" module for this task, it lacks the functionality to provide password protection: var zip = new require('node-zip') ...

javascriptnode.jszippassword-protection

Issue with Ext JS: The property 'substring' is being attempted to be read from an undefined value

Hey there! I'm trying to incorporate a grid panel into my view using Extjs 4.1.1, but I keep encountering an error in the browser console that says "Cannot read property 'substring' of undefined". Below is the JavaScript code snippet I am us ...

javascriptextjs

The usage of arrow functions in ReactJS programming

I'm working on a React component that has the following structure: import React, { PropTypes, Component } from 'react'; import { Accordion, Panel, PanelGroup, Table } from 'react-bootstrap'; const FormCell = ({ data }) => ( ...

javascriptreactjsecmascript-6arrow-functions

What is the best way to create a directive that wraps the div elements utilized in an ng-repeat loop?

When working on my application, I utilize this HTML snippet for an ng-repeat: <div class="gridBody"> <div ng-class="{clicked: row.current == true}" ng-click="home.rowClicked($index)" ng-dblclick="ctrl.rowDoub ...

javascriptangularjsangularjs-directive

Creating a Dynamic Canvas Rendered to Fit Image Dimensions

I'm struggling with a piece of code that creates an SVG and then displays it on a canvas. Here is the Jsbin Link for reference: https://jsbin.com/lehajubihu/1/edit?html,output <!DOCTYPE html> <html> <head> <meta charset=&qu ...

javascripthtmlcsssvghtml5-canvas

Invoke the jquery.load(); function within a preexisting JavaScript file

My goal is to avoid loading javascript with jquery or any similar methods. Currently, I am customizing swfupload (if you are acquainted with it, that's helpful, but not necessary) for a website I am developing. I require the capability to upload, sto ...

phpjavascriptjqueryajax

Error in Rails Jcrop Syntax

I am currently implementing cropping functionality in my Rails application and am following the Railscast as a reference: Despite carefully going through everything, I keep encountering a strange error whenever I attempt to load any page. The error messag ...

jqueryruby-on-railscarrierwavejcrop

React JS project experiencing issues with Material UI components not functioning properly

Here is a unique version of my app.js code: import React from "react"; import './App.css'; import {Button} from "@mui/material"; function App() { return ( <div className="App"> <h1>COVID-19 T ...

javascriptreactjsmaterial-uiweb-development-server

Issue with click function not activating in Chrome when using Angular 6

I am facing an issue where the (click) function is not triggering in my select tag when I use Google Chrome, but it works fine in Mozilla. Below is my code: <div class="col-xl-4 col-lg-9"> <select formControlName="deptId" class="form-control ...

javascripthtmlangulartypescriptgoogle-chrome

Combining numerous (nearly identical) duplicate each statements

I am faced with a series of each statements that are very similar and need to add around 20 more like them. My challenge is figuring out how to streamline the variables used in these statements into a single statement for efficiency, instead of repeating a ...

javascriptjquery

Is there a way to sort an elastic query using JavaScript?

I'm trying to modify my elastic query by adding and removing items from an array. In the array below, I want to remove the element that contains 'item2'. How can I achieve this by checking if the key 'item2' exists and then deletin ...

javascriptarraysobjectelasticsearchfilter

What is the best way to align a text element to the right and a PNG element to the left within a

I am currently working on setting up a navigation bar with a PNG link in the top left corner, and a text element "menu" in the top right corner. Despite my efforts, I have not been successful in achieving this layout using "float: right;" The code snippet ...

htmlcss

How to send an email using asp.net and html

This is the form on my index.aspx page. <form role="form" method="post" action="SendMail.aspx"> <div class="form-group"> <input type="text" class="form-control" id="name" name="name" placeholder="Name" required> </div> ...

htmlasp.net

Some design elements are present in the interface. The functionality of the data tables is working properly, however, upon reloading the page, the table header shrinks. Interestingly

[![enter image description here][1]][1] This is the JavaScript code along with my footer and header references. The issue I am facing is with the design - initially, it shows a buggy design but when I click on the header, it displays the correct design. & ...

javascriptc#ajaxasp.net-coredatatables

Capture XMLHttpRequest request and manually send a 200 status response using vanilla JavaScript

After extensive research, I found conflicting information on this topic. I need to intercept an XMLHttpRequest and simulate a 200 status response from the backend using plain Javascript. This is specifically for testing purposes. So far, I have made pro ...

javascripthttpxmlhttprequest

Establish a connection between the MySql database in WHM (phpmyadmin) and a node.js application

Our team has been working on setting up the database connection with Mysql using node.js in Cpanel. Although I didn't create the database myself, I have all the necessary information such as the host, user, password, name of the database, and port nu ...

javascriptmysqlnode.jsphpmyadmincpanel

variance in efficiency when retrieving a DOM element

While this may not make much of a difference for smaller, simpler DOM elements, the performance impact could be significant when dealing with larger, more complex ones. Is there a noticeable performance gap between storing an element in a variable and cons ...

javascriptjqueryhtmldom

What are the steps to implement background synchronization in place of making fetch requests upon UI changes?

Consider this scenario: A straightforward web application with a comments feature. In my view, when a user submits a comment, the following steps would typically unfold: Show UI loader; Update the front-end state; Send a fetch request to the API to post ...

javascriptreactjsapirestsingle-page-application

How can I reposition an image diagonally to a specific location using JavaScript in p5.js? Is there a method to display an image and then conceal it at a chosen location in p5.js?

Is there a way to move the third image diagonally until it intersects with the two images? var pic1; var pic2; var pic3; let posX=0 let posY=0 const rightwall=350; function preload(){ pic1=loadImage("5.png") pic2=loadImage("iron.jpg&qu ...

javascriptp5.js