Question

I need help writing a piece of JQuery using the slideToggle(), that is reusable.

Scenario: I have this HTML that is repeated multiple times down the page:

<h3>title</h3>
<div>
<table...</table>
</div>

Here is what I have in terms of JQuery so far:

$('h3#im-selling').click(function() {
  $('div.im-selling').slideToggle('slow');
});

Is there a way of writing JQuery that targets the HTML structure rather than picking out id’s and classes…hence making it reusable?

Any help is Greatly Appreciated, Thanks

Answer 1

You can find the <div> relatively using .next(), like this:

$('h3').click(function() {
  $(this).next().slideToggle('slow');
});

.next() is one of the tree traversal methods available.