Question

I’m using JQuery to create a Horizontal Accordion menu (based on the tutorial at Design Reviver. I have it working well, but I need to add a second Horizontal Accordion menu just like it to the same page. I’m sure this can be done, but I don’t know how to adjust the script in the head section so that both menus work at the same time. I’ve experimented with the code, but with no luck so far.

The menu is based on an unordered list, and the first list item has an anchor tag with id="a1" so that it can be told to be “open” to begin with (while the other menu items appear “collapsed”).

Each menu is inside a wrapper div, the first has class="jq_menu" and the second has class="jq_menu2".

At present, I have the following code in the head section of my page. Both menus appear on the page but only the first has the sliding animation working. Any advice is much appreciated! Thank you.

<script src="javascript/jquery-1.2.3.js"
type="text/javascript"></script>

<script type="text/javascript" >
$(document).ready(function(){
var lastBlock = $("#a1");
var maxWidth = 180;
var minWidth = 60;  

$(".jq_menu ul li a").hover(
  function(){
    $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:200});
lastBlock = this;
  }
);

});

</script>

<script type="text/javascript" >
$(document).ready(function(){
var lastBlockB = $("#a2");
var maxWidthB = 180;
var minWidthB = 60; 

$(".jq_menu2 ul li a").hover(
  function(){
    $(lastBlockB).animate({width: minWidthB+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidthB+"px"}, { queue:false, duration:200});
lastBlockB = this;
  }
);

});

</script>

Answer 1

Thank you SO much to everyone who helped me out here. When I added the second parameter for mouseoff, both my image menus started sliding, and one image always remains open from each menu – just as I wanted!

(Interestingly, when I removed the jQuery selector from $(lastBlock).animate etc, it broke the functionality. Not sure why this would be, but very happy that it’s working with the selector anyway.)

I’ve included the final code below in case it helps anyone else 🙂

<script type="text/javascript" >
$(document).ready(function(){
var lastBlock = $("#a1");
var maxWidth = 180;
var minWidth = 60; 

var lastBlockB = $(“#a2”);

$(".jq_menu ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:200});
lastBlock = this;
}, 
function(){ /*do this when they remove their mouse*/ }

);

$(".jq_menu2 ul li a").hover(
function(){
$(lastBlockB).animate({width: minWidth+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:200});
lastBlockB = this;
}, 
function(){ /*do this when they remove their mouse*/ }
);

});

</script>

When the site goes live, I’ll post a link so that people can see the effect in action.