Image swap jQuery help please

crash_D.

I have used jQuery javascript library for the main menu of a website. Please, click the items with arrows next to them. What I need is change the image to darr.gif whenever the sub-menu next to it is extended. Help me plz. thanks (the original image is rarr.gif)

Dinoboff

it should be something like $(el).attr("src", "darr.gif");
http://visualjquery.com >> DOM >> Attributes

You can also add the arrow as a background and and change the class to change the arrow.

crash_D.

thanks... i thought of that already, but the problem is that when the sub-menu is hidden and the link is clicked, I need the darr.gif to appear, but when the sub-menu is shown and the link is clicked, I need the image to return to rarr.gif.

So, the script should somehow check whether the sub-menu is visible or not, which means that the line you mentioned would not work alone, i guess... thanks

Dinoboff

you can hide the menu, use $(el).toggleClass("showMenu"), and when a list item has the showMenu class, show the sub menu and the arrow.

crash_D.

wow... easy... you are too cool, Daniboff. I appreciate it, of course, but thats too cool for me... im not that knowledgeable in jquery/dom/js yet... could you please explain that one in steps.. thanks

Dinoboff

Here an example:
<style> /* Hide the menu */ ul#menu ul { display: none; } /* if you don't need the animation: ul#menu li.showMenu ul { display: block; } */ /* Change the arrow */ ul#menu a.level1 { padding-right: 20px; background: transparent url(rarr.gif) center right no-repeat; } ul#menu li.showMenu a.level1 { background: transparent url(darr.gif) center right no-repeat; } </style> <script> $(document).ready(function(){ $(".level1 a").click(function(){ // get the parent of the clicked link //and add it the showMenu class if it doesn't have it // or remove the class, if it already have it $(this).parent().toggleClass("showMenu"); // Get the next sibling // and slide it up or down $(this).next().slideToggle('slow'); }); }); </script> ... <ul id="menu"> <li> <a class="level1" href="#">Cat 1</a> <ul> <li><a href="#">link 1</a></li> </ul> </li> </ul>

Dinoboff

Here is a tabview tutorial (the same principal could be use for your menu) that is really cool and simple, and that just need some lines of JavaScript and css without any library: http://snook.ca/archives/javascript/managing_style_and_state/

crash_D.

thanks, Daniboff... this is why I LOVE LUSSUMO!!! thanks again..

Dinoboff

yw,

dInOboff

crash_D.

oops.... sorry, Dinoboff