Question

does anyone know of a simple script to have a list of items and show/hide one <li> at a time without engaging ALL of them in the list? Just seeing if anyone had something clever.

I want to find the parent of each link in a list so it only slideToggle’s the appropriate <li> as you go down. I’m trying to list classes for a school and you can open them and see more as you go along, but not open ALL of them at once, and without writing 200 click statements 😉

$('.link').click(function() {
  $('.li').slideToggle();
});


$(this).parent().parent().next('.toggle').toggle('slow')
or

$(this).closest('tr').next('.toggle').toggle('slow');

Answer 1

Why not using this:

$('.link').click(function(){
    $(this).parents('.li').slideToggle();
});

---

To explain, in an event handler you have access to the element that triggered the event via this.

From there, all you need to do is place that element via this in a jQuery object $(this), and use jQuery’s traversal methods to locate the element you’re targeting.

Also, please note that '.li' will look for an element that has the class named li applied to it.

If you were actually targeting the <li> elements irrespective of their class, then you’d want to remove the ..