Opening/Closing Accordion Sub-Menu

jonsan32 12 Junior Poster in Training

11 Years Ago

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="" 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=""></script>

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

HERE'S THE GIVEN JAVASCRIPT INSTRUCTIONS

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>

javascript:jquery

Edited 11 Years Ago by jonsan32

1 Contributor
0 Replies
247 Views

Dani AI

Generated 8 Months Ago

For : the extra skin buttons are coming from the demo UI that the example script injects into the page. That demo-only block both builds the skin selector and toggles a “close same level” mode; removing or guarding that block stops the injected buttons and avoids demo behavior on a production page. A small, focused click handler can then provide the “close other sub-menus on the same level” behavior without the demo UI.

// simple accordion: close siblings on the same level
$(function(){
  var $mtree = $('ul.mtree');

  // hide nested lists initially
  $mtree.find('ul').hide();

  $mtree.on('click', 'li > a', function(e){
    var $li = $(this).parent('li');
    var $sub = $li.children('ul');

    if (!$sub.length) return;   // no submenu, let link behave normally

    e.preventDefault();

    if ($li.hasClass('open')) {
      $sub.slideUp(220);
      $li.removeClass('open');
    } else {
      // close any open siblings at the same level
      $li.siblings('.open').removeClass('open').children('ul:visible').slideUp(220);
      $sub.slideDown(220);
      $li.addClass('open');
    }
  });
});

Notes and quick troubleshooting:

The demo injection (the bit that prepends skin buttons) should be removed or wrapped so it only runs in demo pages; that is the direct cause of the extra controls.
Confirm jQuery is loaded before this script and the plugin file is not included twice; double-initialization often causes duplicate UI.
If Velocity.js is being used site-wide, replace slideUp/slideDown with Velocity equivalents or call the plugin’s animation API for smoother motion.
For accessibility, consider toggling aria-expanded on the clicked link and ensuring keyboard focus works for the accordion headers.

This provides a minimal, deterministic accordion behavior that closes same-level siblings and avoids demo-only UI appearing on the live page.

Be the first to reply

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.