jQuery Forum

Hi there!

I have an script for a vertical (leftside menu) that (almost) works in the way I would. The think is that when I have clicked on a link, i want to have this section open in the menu, the parent header link with all its children links visibly. I have managed to do that with $selPos = $('.menu > ul.Node > li.Node > ul.Node > li.selected');
if($selPos.length){
but.. the exp/collapse will not work in conjunction to this, what I want is when I have clicked on a link I want to see it's parent header link with an minus icon (collapse) instead of the plus (expand). The links comes dynamic and it's an control in .net som I can not rewrite the markup, I had to use Prepend (I think I had) to inject the icons in a span before an actuall header link.

 

If anyone have some idéas here, it would be great!

Thanks

 

//updated//

I have updated my script a bit more but my issue remains, please see http://jsfiddle.net/kuUXN/28/

 

 

$(document).ready(function() {

// Keep expanded after selected
$selPos = $('.menu > ul.Node > li.Node > ul.Node > li.selected');
 if($selPos.length){
 $selPos.parent().css({'display': 'block'});
 }
 
});

 

 

The markup:

<div class="menu">
 <ul class="rootUL">
  <li class="Node">
   <a class="TheLink" href="#">Link1</a>
  </li>
  <li class="Node">
   <a class="TheLink" href="#">Link2</a>
   <ul class="Node">
    <li class="Node">
     <a class="TheLink" href="#">Link2-SubLink1</a>
    </li>
    <li class="Node">
     <a class="TheLink" href="#">Link2-SubLink2</a>
    </li>
   </ul>
  </li>
  <li class="Node">
   <a class="TheLink" href="#">Link3</a>
  </li>
 </ul>
</div>

 

And the CSS:

#PrependedIconExpand{
float:left;
background-image:url('/images/exp.png');
background-repeat:no-repeat;
background-position:0px 6px;
width:11px; height:11px;
padding-top:3px;padding-bottom:3px
}