Listactivator

by marco_rensch

HTML

<div class="directory-section-list">
	<ul  class="list_item">
    	<li class="li_lvl lvl0" id="bx_1847241719_1">Main1</li>
        <ul>
        	<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
                <ul>
                    <li><a href="/directory/autoloader/1-1-8-tons/fd-15/58-fd-15.html">FD 15</a></li>
                    <li><a href="/directory/autoloader/1-1-8-tons/fd-18/59-fd-18.html">FD 18</a></li>
                </ul>
            </li>
         </ul>
	</ul>
     <ul  class="list_item">
     	<li class="li_lvl lvl0" id="bx_1847241719_2">Main2</li>
        <ul>
        	<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
                <ul>                          
                    <li><a href="/directory/autoloader/1-1-8-tons/fd-15/58-fd-15.html">FD 15</a></li>
                    <li><a href="/directory/autoloader/1-1-8-tons/fd-18/59-fd-18.html">FD 18</a></li>
                </ul>
      		</li>
        </ul>
     </ul>
</div>

CSS

.active {background:green;}

JavaScript

$(document).ready(function(){
 $('li.lvl0').click(function () {
        $(".list_item.active").removeClass("active");

        $(this).parent().toggleClass('active');
    });

    $(' .list_item .lvl1').click(function () {
        $(".list_item.active").removeClass("active");
        $(this).parent().toggleClass('active');
    });
});