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?
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.