Tips for automatically opening a specific section of a collapsible menu upon page load using a predetermined value

Question

Tips for automatically opening a specific section of a collapsible menu upon page load using a predetermined value

JSFiddle: http://jsfiddle.net/5qweu58f/4/

HTML (generated using XSLT):

<div id="dvExpProvHolder" class="hidOverflow innerDivCenter">
    <ul class="uSPStyle" id="uSPStyle">
        <li class="setRelative">
            <a class="tfLink clickMe current" title="Care" data-toggle=".tfLink1" id="current" href="javascript:void(0);"><img src="theImages/imgMenu.png" id="imgFirstM" class="imgExpCol" />Care</a>
            <ul class="uSPStyle uSPInner" style="width: 80%;">
                <li><a class="tfLink clickMe" title="This is sub" data-toggle=".tf1SLink1" href="javascript:void(0);">This is sub</a></li>
            </ul>
        </li>
        <li>
            <a class="tfLink clickMe" title="Breast Cancer" data-toggle=".tfLink2" href="javascript:void(0);"><img src="theImages/imgMenu.png" id="imgFirstM" class="imgExpCol" />BC</a>
            <ul class="uSPStyle uSPInner" style="width: 80%;">
                <li><a class="tfLink clickMe" title="OUR LINK" data-toggle=".tf1SLink2" href="javascript:void(0);">OUR LINK</a></li>
            </ul>
        </li>
        <li>
            <a class="tfLink clickMe" title="About" data-toggle=".tfLink3" href="javascript:void(0);">About</a>
        </li>
        <li>
            <a class="tfLink clickMe" title="Anxiety" data-toggle=".tfLink4" href="javascript:void(0);">Anxiety</a>
        </li>
        <li>
            <a class="tfLink clickMe" title="Services" data-toggle=".tfLink5" href="javascript:void(0);">Services</a>
        </li>
    </ul>
</div>

Why doesn't the first UL lose the current class when another UL is clicked? everything else works as expected.
The issue comes up when I would want the visitor to see BC > OUR LINK section which shows "This is for second link sublink 1" without having to come to the page and then click on it. But because they are all in one page, there is no way to do that out of the box. I was wondering if there is a way to specify a query string in the Url and use that to go directly to the sublink? For example: . The 2.1 would represent it is the second main menu and the first submenu. Is there any way to incorporate that into my Jquery script?

javascript jquery html css

Answer 1

Answer №1

Building upon the ideas presented in the main question regarding extracting query string values using JavaScript (How can I get query string values in JavaScript?), this solution showcases how different methods can be implemented to parse window.location and respond accordingly to a query string parameter.

To illustrate this concept, a demo is provided below with a simulated URL instead of window.location, given that the example is contained within a protected frame. The showcased approach leverages URI.js, although several alternatives are available for consideration.

function displayOutput (data) {
  var element = document.createElement('div');
  element.innerHTML = data;
  document.body.appendChild(element);
}

document.getElementById('button-1').onclick = function () {
  displayOutput('Button 1 was clicked!');
};
  
document.getElementById('button-2').onclick = function () {
  displayOutput('Button 2 was clicked!');
};

//Extracting the "click" query string parameter to trigger a button click based on the specified ID.
//Utilizing a fabricated URL in place of window.location within this enclosed environment.
document.getElementById(URI('http://example.com?click=button-1').search(true)['click']).click();

<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.16.1/URI.js"></script>

<button id="button-1">Button 1 - Clicked Automatically</button>
<button id="button-2">Button 2 - Not Auto-Clicked</button>

Answer 2

Building upon the ideas presented in the main question regarding extracting query string values using JavaScript (How can I get query string values in JavaScript?), this solution showcases how different methods can be implemented to parse window.location and respond accordingly to a query string parameter.

To illustrate this concept, a demo is provided below with a simulated URL instead of window.location, given that the example is contained within a protected frame. The showcased approach leverages URI.js, although several alternatives are available for consideration.

function displayOutput (data) {
  var element = document.createElement('div');
  element.innerHTML = data;
  document.body.appendChild(element);
}

document.getElementById('button-1').onclick = function () {
  displayOutput('Button 1 was clicked!');
};
  
document.getElementById('button-2').onclick = function () {
  displayOutput('Button 2 was clicked!');
};

//Extracting the "click" query string parameter to trigger a button click based on the specified ID.
//Utilizing a fabricated URL in place of window.location within this enclosed environment.
document.getElementById(URI('http://example.com?click=button-1').search(true)['click']).click();

<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.16.1/URI.js"></script>

<button id="button-1">Button 1 - Clicked Automatically</button>
<button id="button-2">Button 2 - Not Auto-Clicked</button>

Tips for automatically opening a specific section of a collapsible menu upon page load using a predetermined value

Answer №1

Similar questions

Issue with downloading files in Internet Explorer is not functioning properly

Utilize BotDetect in Angular js for advanced functionality

Creating Dynamic CSS Styling with Vendor Prefixes in Angular 2

What causes discrepancies between jQuery set attributes and .html() output?

When using TypeScript in Angular, the "debugger;" statement may encounter issues in the QA environment

Create a Material Design Lite Grid layout featuring cards that mimics the aesthetic of Google Keep

Testing Your Angular 7 Code: Unit Testing Made Easy

JavaScript code that triggers a function when the mouse is moved over a description box on a

The compatibility issue between jQuery popover and AngularJS causes functionality disruptions

Utilizing Angular Dependency Injection for Extending Base Services with Subclasses

Search for a result based on a connection, but ensure that the association is not included in the final outcome when using

.NET 6 facing controller path value issues due to BeginForm

AngularJS - issue with directive functionality on dynamically inserted classes

What steps should be followed to incorporate a horizontal scrollbar within the table's header?

Locate the storage destination of a NodeJS module that has been installed

What are some solutions for resolving the issue of a neutralino white screen?

Passing a single item from a list as a prop in Vue.js

The PHP content form is malfunctioning and not processing email submissions properly, resulting in the PHP code being

Unlocking Worldwide Availability for Identifying URL Parameters

Issue with IE 11: Including card image inside anchor tags in Bootstrap 4 causes unwanted white space