How to toggle the vertical jQuery.mmenu submenus?

Question

i am trying since days to get this right: the submenus of the jQuery.mmenu shall toggle smoothly and i always would like just one submenu being open at a time. Also i like to keep the feature that if a page opens the current menu element is visible.

I did set up a js fiddle here.

Maybe someone can get me a hint how to apply the .next() selector - in case that is the way to go...

i managed to create a slide toggle, but it toggles all submenus of course:

$(document).ready(function() {
  $(".mm-vertical ul.level2").hide();
  $(".mm-vertical ul.level3").hide();
  $(".level1 a.mm-next").click(function () {
    $(".mm-vertical ul.level2").slideToggle("slow", function () {});
  });
  });

Answer 1

I found a way to do it myself. Not very elegant or short but it works well and keeps the submenu open in case it contains the current menu item. the solution is limited to 3 levels. I added the classes "level1", "level2" as i generate the html of the menu via typo3.

$(".mm-vertical ul").hide();
$(".mm-vertical ul.level3").hide();


$(".level1 a.mm-next").on('click', function(){
var element = $(this).parent('li');
if (element.hasClass('mm-opened')) {
    element.find('ul.level2').slideUp("slow", function () {});
    }
    else {
        element.find('ul.level2').slideDown("slow", function () {});
        element.siblings('li').children('ul').slideUp("slow", function () {});
        element.siblings('li').removeClass('mm-opened');
        element.siblings('li').find('li').removeClass('mm-opened');
        element.siblings('li').find('ul').slideUp("slow", function () {});
        }
          });

$(".level2 a.mm-next").on('click', function(){
var element = $(this).parent('li');
if (element.hasClass('mm-opened')) {
    element.find('ul.level3').slideUp("slow", function () {});
    }
    else {
        element.find('ul.level3').slideDown("slow", function () {});
                element.siblings('li').children('ul').slideUp("slow",   function () {});
        element.siblings('li').removeClass('mm-opened');
        element.siblings('li').find('li').removeClass('mm-opened');
        element.siblings('li').find('ul').slideUp("slow", function () {});
        }
          });
 $('.level2.mm-selected').each(function(){
$(this).parent().removeAttr("style");
});
$('.level2.mm-opened').each(function(){
$(this).parent().removeAttr("style");
 var element = $('.level2.mm-opened');
 element.find('ul.level3').removeAttr("style");
 });
$('.level3.mm-selected').each(function(){
$(this).parent().removeAttr("style");
});
$('.level3.mm-opened').each(function(){
$(this).parent().removeAttr("style");



});