jQuery slideToggle nested ul li

Question

I had this working originally but ran it through the W3C validator, fixed the errors and now it's not working.

I have setup a jsfiddle

Essentially it's a bunch of nested ul's being used as dropdowns, with headings picked out that when individually clicked, reveal the info contained within the nested ul.

But since nesting the ul's properly inside li's this fails to work, have tried selectors like children/siblings/next - all to no avail. That's not to say they won't work, just that i don't understand enough to make them work (clearly!).

This code makes all of the lists slide toggle at once, however i want to control them individually.

$(function(){
  $("ul.featureListings").hide();

  $(".featuresHeading").click(function() {
    $('ul.featureListings').slideToggle(300);
    return false;
  });
});

I am sure using something like:

$(this).next('.featureListings').slideToggle(300);

should work but i can't for the life of me figure it out properly. I'm guessing it's because it's nested and I'm not targeting it properly however my knowledge is limited as is the deadline.

How can I target the appropriate ul accordingly? Wondering if anyone can help shed some light and help me understand why this isn't working please?

Answer 1

Try this:

$(function(){
  $("ul.featureListings").hide();

  $(".featuresHeading").click(function() {
    $(this).next("li").children('ul.featureListings').slideToggle(300);
    return false;
  });
});

You just need to move through DOM in the right way.. You want to move onto next li (.next("li")), then into one of its children (.children('ul.featureListings')) and trigger slideToggle there.

Answer 2

I have made jsfiddle whatever I have understood. I think. You want slideToggle with next and prev close on open of current. I have made change in html page also.

 $("ul.featureListings").hide();

  $(".featuresHeading").click(function() {
      $('ul.featureListings').not($(this).children('ul.featureListings')).slideUp();
    $(this).children('ul.featureListings').slideToggle(300);
    return false;
  });

Answer 3

Use .next()

$(this).next().find('ul.featureListings').slideToggle(300);

Demo here http://jsfiddle.net/heE6J/4/

Answer 4

$(function(){
  $("ul.featureListings").hide();

  $(".featuresHeading").click(function() {
    $('ul.featureListings', $(this).next()).slideToggle(300);
    return false;
  });
});