Initially, everything was working fine until I put it through the W3C validator. After fixing the errors, now it's not functioning as expected.
I have created a jsfiddle
The setup involves nested ul elements being used as dropdowns, with headers that reveal the content of the nested ul when clicked individually.
However, after properly nesting the uls inside lis, the functionality stopped working. I have tried various selectors like children, siblings, and next but to no avail. It seems like I lack the understanding to make them work correctly.
The current code triggers all lists to slide toggle at once, instead of controlling them individually.
$(function(){
$("ul.featureListings").hide();
$(".featuresHeading").click(function() {
$('ul.featureListings').slideToggle(300);
return false;
});
});
I believe using something like:
$(this).next('.featureListings').slideToggle(300);
should do the trick, but I am struggling to make it work. It might be because of incorrect targeting due to nesting, and my limited knowledge is hindering progress given the impending deadline.
How can I effectively target the appropriate ul? Any assistance or insight on why this is failing would be greatly appreciated.