CODEWITHSUNDEEP
jquery
Awais Imran
Awais Imran

Reputation: 1344

jQuery Accordion multiple level hierarchy issue

I am trying to build the jQuery accordion. On first level it is working fine but on sub level it is not. Can somebody help me to fix the issue?

here is the fiddle:

Code:

$(document).ready(function() {
$('.browse-by-categories ul div').click(function() {
    $('.browse-by-categories ul div').removeClass('on');
    $('.browse-by-categories ul.toggel').slideUp('normal');
    $('.plusMinus').text('+');
    if($(this).next().is(':hidden') == true) {
        $(this).addClass('on');
        $(this).next().slideDown('normal');
        $(this).children('.plusMinus').text('-');
     } 
 });
$('.browse-by-categories ul li div').mouseover(function() {
    $(this).addClass('over');
}).mouseout(function() {
    $(this).removeClass('over');
});
$('.browse-by-categories ul.toggel').hide();

});

Upvotes: 0

Views: 267

Answers (1)

matthias_h
matthias_h

Reputation: 11416

I've just adjusted your Fiddle a bit: Fiddle

$(".menu, .submenu").click(function () {
  if ($(this).hasClass("on")) {

    if ($(this).hasClass("menu") && 
         $(this).next(".toggel").find("div.submenu").hasClass("on"))
    {
        $(this).next(".toggel").find("div.submenu").next(".toggel").slideUp();
        $(this).next(".toggel").find(".plusMinus").text('+');
        $(this).next(".toggel").find("div.submenu").toggleClass("on");
    }
    $(this).next(".toggel").slideUp();
    $(this).find('.plusMinus').text('+');

  }
  else {
    $(this).next(".toggel").slideDown();
    $(this).find('.plusMinus').text('-');

  }
  $(this).toggleClass("on");
});

And added classes "menu" and "submenu" to the divs, so it's easier to identify the slides.

Upvotes: 1

Related Questions