Vertical multilevel Menu slideToggle

Question

I am newbie in jquery/js and I am trying to create a tabbed menu with jqueryui/jquery. I wanted inner tabs to be there so created it using slideToggle. I have to slideToggle in the tabs and I want one to close when another slideToggle is open, I did it for the tabs to slideUp the menu if it is open but I am not able to do it with one another slideToggles. Here is the code which I tried:

$(function() {
    $( "#tabs" ).tabs();
});

$(document).ready(function() {

  $(".menu a").click(function(){
    $(".video").each(function(){
        $(this).get(0).pause();
    });
  });

  //tabbing selection
  $(".menu li:eq(0)").addClass("active");

  $(".menu li").click(function(){
    $(this).addClass('active');
    $(this).siblings().removeClass('active');       
  });

  $(".subtabs").click(function(){
    $(this).nextUntil("li.tabsclose").slideToggle();
    $(this).removeClass('active');
    $(this).next().addClass('active');
  });

  $(".tabs").click(function(){
    $(".subtabsinner").slideUp();
  });

});

and this is the link to codepen http://codepen.io/SurajVerma/pen/Fskmu .

before posting the question, I tried Google and searched on stackoverflow, but not able to find anything similar.

Thanks.

Answer 1

You can add the following line in your $(".subtabs").click

$('.subtabs').not(this).nextUntil(".subtabs").slideUp();

Demo available

http://codepen.io/anon/pen/dBkAE

What'll do is pull up, all the subtabs apart from the one currently active