CODEWITHSUNDEEP
javascriptcss
Learning
Learning

Reputation: 20001

Expand submenu list OL if any of the its list li has active class

I have tree structure based menu and by default sub list as closed, I want to show only that block of list which li anchor a has active class.

I tried few thing but i doing something wrong in targeting the right element.

Let us say i want to keep About section open as it has sub menu's and one of its elemnts has active class <li><a href="#" class='active'>Mission</a></li>

<h1>Click on Contact</h1>
<div class="page-left-bar">
  <ol id='expList'>
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a>
      <ol>
        <li><a href="">Sub menu</a></li>
        <li><a href="#">Sub menu long name</a></li>
        <li><a href="#">Sub menu</a></li>
        <li><a href="#">Sub menu</a></li>
      </ol>
    </li>
    <li><a href="#">About </a>
      <ol>
        <li><a href="#" class='active'>Mission</a></li>
        <li><a href="#">Vision</a></li>
        <li><a href="#">Sub menu</a></li>
        <li><a href="#">Sub menu</a></li>
      </ol>
    </li>
  </ol>
</div>

Fiddle Link https://jsfiddle.net/k2jqqbbk/1/

Upvotes: 0

Views: 212

Answers (2)

Mohsen Safari
Mohsen Safari

Reputation: 6795

try this in jQuery:

$('.active').closest('ol').css('display', 'block');

https://jsfiddle.net/k2jqqbbk/3/

Upvotes: 1

RRR
RRR

Reputation: 1084

You can do that by placing the code in document.ready... kindly check the updated jsfiddle...

HTML

<h1>Click on Contact</h1>
<div class="page-left-bar">
  <ol id='expList'>
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a>
      <ol>
        <li><a href="">Sub menu</a></li>
        <li><a href="#">Sub menu long name</a></li>
        <li><a href="#">Sub menu</a></li>
        <li><a href="#">Sub menu</a></li>
      </ol>
    </li>
    <li><a href="#">About </a>
      <ol>
        <li><a href="#" class='active'>Mission</a></li>
        <li><a href="#">Vision</a></li>
        <li><a href="#">Sub menu</a></li>
        <li><a href="#">Sub menu</a></li>
      </ol>
    </li>
  </ol>
</div>

JQUERY

$(document).ready(function(){




       $("#expList > li").click(function () {
            $(this).find("ol").slideToggle();
        });


$('#expList > li').children().has('.active').css('display', 'block');

});

Upvotes: 3

Related Questions