I have been unable to find an answer to this question, but I am sure someone here is able to help, I have two instance of jQuery in my Joomla site, the first allows a clickable banner drop down at the top of the website the second allows the background to fade when the navigation is hovered two separate entities that seem to clash.

As you can see I have tried to define the second as

jQuery(function($){ to avoid conflict without success, both work if i delete the other.

Any help would be much appreciated.

Header

1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
   

The first is the clickable banner

1. <script type="text/javascript">
   $(document).ready(function(){
      
       $(".toggle_container").hide();
   
       $("h2.trigger").click(function(){
           $(this).toggleClass("active").next().slideToggle("slow");
       });
   
   });
   </script>
   
   
   
   
   
   
   
   
   
   
   

The second is the navigation fade:

1.         <script type="text/javascript">
               jQuery(function($){
                   var $oe_menu        = $('#oe_menu');
                   var $oe_overlay        = $('#oe_overlay');
                  
   
                   $oe_menu.bind('mouseenter',function(){
                       var $this = $(this);
                       $oe_overlay.stop(true,true).fadeTo(200, 0.8);
                       $this.addClass('hovered');
                   }).bind('mouseleave',function(){
                       var $this = $(this);
                       $this.removeClass('hovered');
                       $oe_overlay.stop(true,true).fadeTo(200, 0);
                       $oe_menu_items.children('div').hide();
                   })
               });
           </script>