If I understand your question correctly, you should be able to do it
by Traversing the DOM.
So, let's say that the HTML is like this:
<div class='one_record'>
Lorem ipsum...
<a class='hide_show_link' href='#'>Hide/Show extra info</a>
<div class='starts_hidden'>
Show this when the link is clicked.
</div>
</div>
So your CSS would probably have something like:
.starts_hidden { display: none; }
Now, this *wouldn't* work:
$( function () {
$('.hide_show_link').click( function () {
$('.starts_hidden').toggle();
});
});
Because clicking on a hide_show_link will toggle ALL of the things of
class 'starts_hidden'.
You probably want to do something like this:
$( function () {
// DOM is ready:
$('.hide_show_link').click( function () {
// in here, 'this' refers to the particular link we're
inspecting.
$(this).next().toggle(); // start at the current link, find the
next element in the DOM, and toggle it.
});
});
The reason this works is because each link hide shows the Next div in
the DOM. If your HTML is different, then the code between $(this)
and .toggle() will be different. See:
http://docs.jquery.com/Traversingfor the functions that will help you here.
Cheers,
-Eric