joining JQuery scripts

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

You can use the map function

['jq_menu', 'jq_menu2'].map(function(n){
    $("." + n + " 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;
        }
    );
})

Answer 2

The ready() function triggers when the DOM is registered by the browser. So it will be called only once. Get rid of the second block of JavaScript and include the code for the second menu within the $(document).ready() function of the first block.

Answer 3

Thanks for the sugggestions. Based on the answer from mplusz, I've now got the following code. At the moment, neither menu has the animated sliding action. Could this be an issue with my syntax? Otherwise, I don't know how to combine the hover functions due to the different div classes (jq_menu2 and jq_menu) and the different variable names (lastBlock, lastBlockB etc).

<script type="text/javascript" >
$(document).ready(function(){
    var lastBlock = $("#a1");
    var maxWidth = 180;
    var minWidth = 60;  
var lastBlockB = $("#a2");
    var maxWidthB = 180;
    var minWidthB = 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;
  }
);

}

$(".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 4

[Edit] I think your main problem may be that you only have one half of the hover function. the hover function takes two parameters, what to do on mouseon, and what to do on mouseoff.

$(thing).hover(
      function(){ /*do this when they hover over*/ }, //<---- don't forget that comma
      function(){ /*do this when they remove their mouse*/ }
);

When you declare lastBlock as a jQuery object:

var lastBlock = $("#a1");

You don't need to call it within the jQuery selector later on.

Bad

$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:200 });

Good

lastBlock.animate({width: minWidth+"px"}, { queue:false, duration:200 });

Answer 5

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.