JQuery Expand Nested Accordion Menu by URL

Question

i am having the following Problem. I implemented a nested accordion Menu JQuery script on my Website. What i need to do now is that the accordion Menu sub categories expand based on an URL.

Here is the fiddle https://jsfiddle.net/w6fa87ov/

You will find that i set the Menu item "Test_2" within "Sub Category 1.2" on active. When the user enters the corresponding URL i.e. "/myurl/Test_2" then the Accordion Menu should open the item "Sub Category 1.2" by default.

Iam not a JQuery programmer and i dont know how to do this in JQuery. My noob consideration was something like: - If i find an active element within the menu i "click" the corresponding element which should expand it

Thanks in advance, best regards Burnie

HTML:

<div id="main">
<div id="nestedAccordion">
        <h5 id="id_element_TopKat_Food">First Top Category</h5>
        <div id="container2">
            <h6 id="id_element_Sub1Kat">Sub Category 1.1</h6>
            <div id="container3">
                    <a class="accordionSubKategorie" href="/myurl/Test_0" style="text-decoration:none;">  
                        <h7 id="id_element_Sub2Kat" class="Sub2Kat"> Test_0</h7>
                    </a>
            </div>

            <h6 id="id_element_Sub1Kat">Sub Category 1.2</h6>
            <div id="container3">
                <a class="accordionSubKategorie" href="/myurl/Test_1" style="text-decoration:none;">  
                    <h7 id="id_element_Sub2Kat" class="Sub2Kat"> Test_1</h7>
                </a>
                <a class="accordionSubKategorie" href="/myurl/Test_2" style="text-decoration:none;">   
                    <h7 id="id_element_Sub2Kat" class="Sub2Kat active"> Test_2</h7>
                </a>
                <a class="accordionSubKategorie" href="/myurl/Test_3" style="text-decoration:none;">    
                    <h7 id="id_element_Sub2Kat" class="Sub2Kat"> Test_4</h7>
                </a>   
            </div>
        </div>

        <h5 id="id_element_TopKat_Non-Food">Second Top Category</h5>
        <div id="container2"> 
            <h6 id="id_element_Sub1Kat">Sub Category 2.1</h6>
            <div id="container3">
                <a class="accordionSubKategorie" href="/myurl/Test_4" style="text-decoration:none;">  
                        <h7 id="id_element_Sub2Kat" class="Sub2Kat"> Test_4</h7>
                </a>
            </div>     
        </div> 
</div>

JQuery:

  var parentDivs = $('#nestedAccordion div');
  var childDivs = $('#nestedAccordion h6').siblings('div');

  $('#nestedAccordion h5').click(function() {
    parentDivs.slideUp();
    if ($(this).next().is(':hidden')) {
      $(this).next().slideDown();
    } else {
      $(this).next().slideUp();
    }
  });

  childDivs.slideUp();
  $('#nestedAccordion h6').click(function() {
    childDivs.slideUp();
    if ($(this).next().is(':hidden')) {
      $(this).next().slideDown();
    } else {
      $(this).next().slideUp();
    }
  });

CSS:

    h5 {
    margin-bottom: 8px;
    font-weight:bold;
    font-size: 20px;
    width: 100%;
    display: block;
    background: #6EB90A;
    color: #fefefe;
    padding: .75em;
    border-radius: 0.15em;
    cursor: pointer;
    cursor: hand;
}

h5:hover {
  background: #5c8a1c;
  text-decoration: none;
  color: white;
}

h6 {
    margin-top:-3px;
    font-size: 15px;
    width: 100%;
    display: block;
    background: #FFFFFF;
    border-color: #476767;
    box-shadow: 0px 0px 0px 2px rgba(71,103,103,1);
    color: #476767;
    padding: .25em;
    border-radius: 0.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    cursor: hand;
}

h6:hover {
  background: #476767;
  text-decoration: none;
  color: white;
}

h7.Sub2Kat {

    font-size: 15px;
    width: 100%;
    display: block;
    color: #476767;
    padding-top: 2px;
    padding-bottom: .1em;
    padding-left: 1.8em;
    border-radius: 0.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    cursor: hand;
}

h7.Sub2Kat:hover {
  background: #6EB90A;
  color: white;
}

h7.Sub2Kat.active {
    border: 2px solid #ddd;
    border-radius: 0.8em;
    padding-left: 1.2em;
}

.Sub2Katactive {
    font-size:0.9em;
}

h7.Sub2Kat.active {
    border: 2px solid #ddd;
    border-radius: 0.8em;
    padding-left: 1.2em;
}

Show source
| url   | javascript   | jquery   | menu   | accordion   2017-01-06 14:01 1 Answers

Answers to JQuery Expand Nested Accordion Menu by URL ( 1 )

  1. 2017-01-06 15:01

    If this is intended as a menu you could build everything in an unordered list with list elements inside. Any nested menus can be done as such:

      <ul class="menu">
        <li class="menuItem">
          <a href="#">Page 1</a>
          <ul class="subMenu">
            <li class="menuItem2"><a href="#">Sub Page 1</a></li>
            <li class="menuItem2"><a href="#">Sub Page 2</a></li>
            <li class="menuItem2"><a href="#">Sub Page 3</a></li>
          </ul>
        </li>
        <li class="menuItem"><a href="#">Page 2</a></li>
        <li class="menuItem"><a href="#">Page 3</a></li>
      </ul>

    DOing it this way will allow you to target the :active list item that is built in with browsers. Then you could use css and jquery to make the dropdown magic. In jquery you can target the :active anchor as such:

    $('menu > li a:active').doSomething();

    If this doesn't interest you, check out this other stack overflow answer that may be of help as well.

    Jquery - determining which link was clicked

    Cheers

Leave a reply to - JQuery Expand Nested Accordion Menu by URL

◀ Go back