How to expand certain part of a collapsible menu on page load based on a value

Question

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: http://www.myweb1.com/pages.aspx?id=098&menulink=2.1. 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?

If you are asking how to get query string values in JavaScript, this has been answered: http://stackoverflow.com/q/901115/830125 — Drew Gaynor, Sep 29 '15 at 19:25
@DrewGaynor Thank you but I would like to know how to take the query string value and incorporate it in my code to open the exact menu/submenu. — Si8, Sep 29 '15 at 19:27
*"Why doesn't the first UL lose the current class when another UL is clicked? everything else works as expected."* Do you mean the ``? The "Care" link has `id="current"`, which is being styled the same as `.current`. — Jacob, Sep 29 '15 at 20:18
@DivineComedian Thank you pointing it out. I thought I removed it but I guess I didn't. — Si8, Sep 30 '15 at 12:58

score 0 · Answer 1 · edited May 23 '17 at 12:29

Expanding on the examples from the authoritative question on the subject (How can I get query string values in JavaScript?) to solve this particular problem, you could use any of those methods for parsing window.location and taking action based on a query string parameter.

A working example is below, using a fake URL instead of window.location, as the snippet is in a sandboxed frame. This example uses URI.js, but there are many other options.

function log (o) {
  var el = document.createElement('div');
  el.innerHTML = o;
  document.body.appendChild(el);
}

document.getElementById('button-1').onclick = function () {
  log('Button 1 clicked!');
};
  
document.getElementById('button-2').onclick = function () {
  log('Button 2 clicked!');
};
  
//Grab the "click" query string parameter. The button with the specified ID will be clicked.
//Using a fake URL instead of window.location inside this sandboxed frame
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 - Auto-Clicked</button>
<button id="button-2">Button 2 - Not Auto-Clicked</button>

Thank you for the reply but I can do that, I wanted to see how to expand certain part of the collapsible menu based on the query string. — Si8, Sep 29 '15 at 19:57
@SiKni8 Sure, this is just a simple example. Instead of calling `.click()` on a button, just parse the query string value and use it to click one of the collapsible menu headers instead. — Drew Gaynor, Sep 29 '15 at 20:01

How to expand certain part of a collapsible menu on page load based on a value

1 Answers1