I have html with a submenu inside another submenu. What i want is on page load if a sub sub li has the class turnedon for the parent to toggle and its parent to toggle, so the li containing the li with class turned on are all visible..
HTML:
<ul class="NewsSubMenu">
<li class="NewsSubMenuOn" style="margin-left:-1.7px;">
<span style="padding-left:35px; color:White;"> News Archive</span>
<ul class="NewsArchive">
<li class="off">
<a href="#" class="year">2012</a>
<ul class="NewsMonths">
<li class="off">
<a href="#" class="month">March</a>
<ul class="NewsArt">
<li class="turnedon">
News Headline
</li>
</ul>
</li>
<li class="off">
<a href="#" class="month">February</a>
<ul class="NewsArt">
<li>
Title </li>
</ul>
</li>
</ul>
</li>
<li class="off">
<a href="#" class="year">2011</a>
<ul class="NewsMonths">
<li class="off">
<a href="#" class="month">March</a>
<ul class="NewsArt">
<li>
PVC4PIPES
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
CsS:
.NewsSubMenuOn ul li.off ul {
display:none;
}
jquery:
$(document).ready(function () {
$(".turnedon").parent().parent().toggle();
});
my jquery isnt working?
Try this one:
You can check it here http://jsfiddle.net/KwdmZ/