Question

Need to add an active class to both parent and child element if a user clicks on the child element in a list. My html is as follows:-

<ul class="tabs">
      <li class="accordion"><a href="#tab1">Bar</a>
         <ul class="sub">
           <li>lorem/li>
           <li>ipsum</li>
           <li>Lorem Ipsum</li>
           <li>Dolor Sit Amet</li>
         </ul>
      </li> 

and I’m using the jquery code below to add an active class to both the parent and child element yet I’m having errors:-

$("ul.tabs li").click(function() {
      $("ul.tabs li").removeClass("active").find(".sub li").removeClass("active"); 
      $(this).addClass("active").find(".sub li").addClass("active"); 
});

Then styled my active class in CSS. say example

.active {background:#EFEFEF;}

only the clicked (this) child element should have the active class applied to it and not the whole li child elements. Now together with the child li (say lorem) the parent li (bar) should also be highlighted. Think of it like a tree accordion menu where both the selected child element and it’s parent li have the active class with different css styling.

Answer 1

I’m just going to make an assumption here that you only want to add the active class to the list items like so: http://jsfiddle.net/gfkM4/

I hope that’s what you were looking for. Cheers.