Two type of JQueries in one app

Two type of JQueries in one app

HI All,

Very easy and maybe stupid question.

I am trying to use a FB type  slide out menu and an accordion style for a mobile app.  However I can't seem to get the Accordion style code to work.

I think I am missing something very basic when putting the two together.  Any help is appreciated.

Thanks 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <meta name="author" content="www.frebsite.nl" />
  <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />

  <title>LogMyDiveIn</title>

  <link type="text/css" rel="stylesheet" href="css/demo.css" />
  <link type="text/css" rel="stylesheet" href="dist/core/css/jquery.mmenu.all.css" />
<link rel="stylesheet" href=" http://code.jquery.com/ui/1.10.3/themes/overcast/jquery-ui.css" />
  <script src=" http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src=" http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="dist/core/js/jquery.mmenu.min.all.js"></script>
  <script type="text/javascript">
  
   $(function() {
    $('nav#menu').mmenu();
   });
  </script>
 </head>
 <body>
  <div id="page">
   <div class="header">
    <a href="#menu"></a>
    Log My Dive In
   </div>
           
           
   <div class="content">
           
    <div id="container"><!--start of div container-->
<div id="accordion"><!--start of div accordion-->

<h2>Tab 1</h2>
<div> this is some text out here and some more text out here ..and a lil more text out here this is some text out here and some more text out here ..and a lil more text out here this is some text out here and some more text out here ..and a lil more text out here</div>

<h2>Tab 2</h2>
<div> this is some text out here and some more text out here ..and a lil more text out here this is some text out here and some</div>

<h2>Tab 3</h2>
<div> this is some text out here and some more text out here ..and a lil more text out here this is some text out here and some more text out here ..and a lil more text out here this is some text out here and some more text out here ..and a lil more text out here</div>

</div><!--end of div accordion-->
</div><!--end of div container-->   
   </div>
   <nav id="menu">
    <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#about">About us</a>
      <ul>
       <li><a href="#about/history">History</a></li>
       <li><a href="#about/team">The team</a>
        <ul>
         <li><a href="#about/team/management">Management</a></li>
         <li><a href="#about/team/sales">Sales</a></li>
         <li><a href="#about/team/development">Development</a></li>
        </ul>
       </li>
       <li><a href="#about/address">Our address</a></li>
      </ul>
     </li>
     <li><a href="#contact">Contact</a></li>
    </ul>
   </nav>
  </div>
      
           <script type="text/javascript" src="ext.js"></script>

 </body>
</html>