Accordion menu only working after refreshing

Question

Hi,
I created my menu by putting module menu version2 code: {module_menu, version="2", menuId="5475", moduleTemplateGroup="Prodcut Menu"} in a page template. It created the correct format of menu I want:
<div id="ProductMenu">
     <ul id="ProductMenuList" class="clearfix">
     <li class="ProductOne">       
          <a href="/Products/productone">ProductOne</a>           <ul class="clearfix">
               <li class="subProductOne1">
               <li class="subProductOne2">
               <li class="subProductOne3">               <li class="subProductOne4">
           </ul>
     </li>
     <li class="ProductTwo">         
          <a href="/Products/productone">ProductTwo</a>
           <ul class="clearfix">
               <li class="subProductTwo1">               <li class="subProductTwo2">               <li class="subProductTwo3">                <li class="subProductTwo4">           </ul>
     </li>
    </ul>
</div>
I need to make it an accordion menu. So I used jquery ui. But the accordion menu only works after I refresh the page. Here are the scripts I have at the head of the page template:
<link href="styles/jquery-ui.css" rel="stylesheet" />
        <script src="javascripts/jquery-1.8.3.js"></script>
        <script src="javascripts/jquery-ui.js"></script>
  <script>$(function() {$( "#ProductMenuList" ).accordion();});
  </script> 
The link path works absolutely fine and the menu works at localhost. I also tried creating an external js for the script,  and also put it at the end of body. But no luck. Could the code: {module_menu, version="2", menuId="5475", moduleTemplateGroup="Prodcut Menu"} be the reason that makes the script called before page content is created? Any ideas?

Answer 1

http://ppdecom.businesscatalyst.com/products
Thx