Question

I have the menu structure like below,

<div class="submenu">
<ul class="treeview">
  <li class="submenu" id="menu-item-5592" style="background-image: url('open.gif');">
     <a href="/Products/Category/Large-Custom-Water-Features">Large Custom Water Features</a>   
     <ul class="sub-menu" rel="open" style="display: block;">          
       <li class="submenu" >
         <ul class="submenu" rel="closed" style="disply:none;">
          <li></li>
          <li></li>          
         </ul>
       </li>       
     </ul>    
  </li>    
</ul>
</div>

In the above menu the whole li has style="background-image: url('open.gif');". previously it was style="background-image: url('closed.gif');".

the above attribute set when i clicked that link. i need when i click that link the i needt to change display attribute from <ul class="submenu" rel="closed" style="display:none;"> to <ul class="submenu" rel="closed" style="display:block;">

how can i do this?

Answer 1

This is not a very concrete answer to your problem, but more a suggestion:

Instead of dealing with style attributes, I would add/remove a class to each <li> element like close, open (or re-use the rel attribute you already have) and then solve your issue just with CSS.

This separates logical concerns (you only change an abstract open/close state) from the visual representation of these states.

jQuery supports this approach very well.