I am creating a theme and connecting it with the native WP menu manager, then I plan to use JQuery-Collapse for when there are submenus.

This is the menu code generated by wp_nav_menu()

Code:
<div id="collapse_menu">
<div class="menu-sidebar-container">
  <ul id="menu-sidebar" class="menu">
    <li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="http://localhost/wordpress/?page_id=36">Home</a></li> 
    <li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-62"><a href="http://localhost/wordpress/?page_id=44">Fruits</a> 
        <ul class="sub-menu"> 
	   <li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64"><a href="http://localhost/wordpress/?page_id=46">Apple</a></li> 
	   <li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-63"><a href="http://localhost/wordpress/?page_id=48">Orange</a></li> 
        </ul> 
    </li> 
  </ul>
</div>
</div>
So when I click on Fruits, the submenus should collapse/uncollapse. How can I use JQuery-collapse with this?