joining JQuery scripts
<p>I'm using JQuery to create a Horizontal Accordion menu (based on the tutorial at <a href="http://designreviver.com/tutorials/jquery-examples-horizontal-accordion/" rel="nofollow">Design Reviver</a>. 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.</p>

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

<p>Each menu is inside a wrapper div, the first has <code>class="jq_menu"</code> and the second has <code>class="jq_menu2"</code>. </p>

<p>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.</p>

<pre><code>&lt;script src="javascript/jquery-1.2.3.js"
type="text/javascript"&gt;&lt;/script&gt;

&lt;script type="text/javascript" &gt;
$(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;
  }
);

});

&lt;/script&gt;

&lt;script type="text/javascript" &gt;
$(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;
  }
);

});

&lt;/script&gt;
</code></pre>
