Opening/Closing Accordion Sub-Menu

[jonsan32]

I'm having trouble applying the javascript necessary to close one set of sub-menus when another set is opened. The tutorial site provided some demo code that works, but I can't get it to work without displaying all the various buttons to activate the other available skins. Up top is the code, and below that is the provided javascript. I'm sure it's easy, but I'm just clueless. Any help would be wildly appreciated. Thanks!

Taken from: http://www.jqueryscript.net/accordion/Animated-Vertical-Accordion-Menu-with-jQuery-CSS3-mtree-js.html

<link href="https://dl.dropboxusercontent.com/u/5739741/omar/code/Animated-Vertical-Accordion-Menu-with-jQuery-CSS3-mtree-js/mtree.css" rel="stylesheet" />
<style>
a{text-decoration:none; letter-spacing:2px;}
</style>


<ul class="mtree transit" style="width:250px">

  <li><a href="#">Menu 1</a>

    <ul>
      <li><a href="#">Sub-menu 1</a></li>
      <li><a href="#">Sub-menu 2</a></li>
      <li><a href="#">Sub-menu 3</a></li>
    </ul>
  </li>

  <li><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Sub-menu 1</a></li>
      <li><a href="#">Sub-menu 2</a></li>
      <li><a href="#">Sub-menu 3</a></li>
    </ul>
  </li>

  <li><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Sub-menu 1</a></li>
      <li><a href="#">Sub-menu 2</a></li>
      <li><a href="#">Sub-menu 3</a></li>
    </ul>
  </li>

  <li><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Sub-menu 1</a></li>
      <li><a href="#">Sub-menu 2</a></li>
      <li><a href="#">Sub-menu 3</a></li>
    </ul>
  </li>

  <li><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Sub-menu 1</a></li>
      <li><a href="#">Sub-menu 2</a></li>
      <li><a href="#">Sub-menu 3</a></li>
    </ul>
  </li>


  <li><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Sub-menu 1</a></li>
      <li><a href="#">Sub-menu 2</a></li>
      <li><a href="#">Sub-menu 3</a></li>
    </ul>
  </li>

</ul>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src='http://cdnjs.cloudflare.com/ajax/libs/velocity/0.2.1/jquery.velocity.min.js'></script> 
<script src="https://dl.dropboxusercontent.com/u/5739741/omar/code/Animated-Vertical-Accordion-Menu-with-jQuery-CSS3-mtree-js/mtree.js"></script>

You can view it in "non-action" on my site: http://officiallyofficiating.blogspot.com/

HERE'S THE GIVEN JAVASCRIPT INSTRUCTIONS

1. Setup the accordion menu.
   var collapsed = true: Start with collapsed menu (only level 1 items visible)
   var close_same_level = false: Close elements on same level when opening new node.
   var duration = 400: Animation duration should be tweaked according to easing.
   var listAnim = true: Animate separate list items on open/close element (velocity.js only).
   var easing = 'easeOutQuart': Velocity.js only, defaults to 'swing' with jquery animation.

AND HERE'S THE GIVEN JAVASCRIPT VIA SOURCE CODE

<script>
$(document).ready(function() {
  var mtree = $('ul.mtree');

  // Skin selector for demo
  mtree.wrap('<div class=mtree-demo></div>');
  var skins = ['bubba','skinny','transit','jet','nix'];
  mtree.addClass(skins[0]);
  $('body').prepend('<div class="mtree-skin-selector"><ul class="button-group radius"></ul></div>');
  var s = $('.mtree-skin-selector');
  $.each(skins, function(index, val) {
    s.find('ul').append('<li><button class="small skin">' + val + '</button></li>');
  });
  s.find('ul').append('<li><button class="small csl active">Close Same Level</button></li>');
  s.find('button.skin').each(function(index){
    $(this).on('click.mtree-skin-selector', function(){
      s.find('button.skin.active').removeClass('active');
      $(this).addClass('active');
      mtree.removeClass(skins.join(' ')).addClass(skins[index]);
    });
  })
  s.find('button:first').addClass('active');
  s.find('.csl').on('click.mtree-close-same-level', function(){
    $(this).toggleClass('active'); 
  });
});
</script>