Correct usage of jQuery to select each closest section, and a bit about semantic

Question

I currently work on an portfolio-overview, the client wants a slideable (toggle-stated) section below each row. The section will be filled later with some ajaxed stuff, depending on which link was clicked.

The problem is, that jQuery's closest()-selector not work (The fault is certainly not in jQuery's core, rather than my approach :P).

Currently I use jQuery's next-selector, but this works only on each 4th a-tag. I'm working on jsfiddle to prototype a bit around: http://fiddle.jshell.net/k79kf/1/

Any ideas what's the problem?

---

Another thing is the semantic correctness of what I made. Actual I've some a-nodes to toggle the section below each row, four in number:

a a a a
section
a a a a
section
a a a a
section
...

However, I think it is not the "proper" way to do this, or? Maybe is an ordered-list the better choice, but where to place the slideable section. Or section's instead of a's and article's instead of section's?

Answer 1

closest() selects the closest ancestor.

next() selects only the immediate next sibling.

You want .nextAll('section').first().

---

A more semantic approach would be to wrap each group of four in a container element, then write $(this).parent().children('section').

Alternatively, give each section an ID, make the as point to that ID (<a href="#section1">), then write $(this.id).
Using this approach, you can even eliminate the Javascript entirely using a section:target CSS selector.