jQuery Forum

Hiya all, i'm fairly new to jquery but to tbh i feel like a non-swimmer in the ocean but i
*have* to get this solved and working. It's a hierarchic nested menu which i generate in a shop generated
but i'm having problems toggling active clases to siblings/children.


On page load i have a menu as such:

<li class="level1">link1
<li class="level1">link2
<li class="level1">link3
<li class="level1">link4
<li class="level1">link5

If i click on link4 i get

<li class="level1" class="active"><a>link4
    <ul>
      <li class="level2">link4.1
      <li class="level2">link4.2
      <li class="level2">link4.3
      <li class="level2">link4.4
     </ul>   
   

If i click on link4.2 I'd like to only display


<li class="level1" class="active">link4
    <ul>
    <li class="level2" class="active">link4.2
        <ul>
        <li class="level3">link4.2.1
        <li class="level3">link4.2.2
        <li class="level3">link4.2.3
        <li class="level3">link4.2.4
      
      
      
If i click on link 4.2.2 i get

<li class="level1" class="active">link4
    <ul>
    <li class="level2" class="active">link4.2
        <ul>
        <li class="level3" class="active">link4.2.2
            <ul>
            <li class="level4">link4.2.2.1
            <li class="level4">link4.2.2.2
            <li class="level4">link4.2.2.3      
      
  
I've been fiddling with this for a day and a half but can't get it to work
I'd appreciate if if anyone coud find the 10 minutes needed to fiddle with the jquery.
thx
  

here's the corresponding jsfiddle


http://jsfiddle.net/astrochicken/bj44vfy6/1/