Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Image swap jQuery help please

edited June 2007 in Vanilla 1.0 Help
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)


  • edited June 2007
    it should be something like $(el).attr("src", "darr.gif"); >> DOM >> Attributes

    You can also add the arrow as a background and and change the class to change the arrow.
  • 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
  • edited June 2007
    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.
  • 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
  • edited June 2007
    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>
  • 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:
  • thanks, Daniboff... this is why I LOVE LUSSUMO!!! thanks again..
  • yw,

  • oops.... sorry, Dinoboff
This discussion has been closed.