Q:

JQuery equal heights on click for individual expanded text

I have a page set up nicely (JSFiddle) with a photo and expanding bio when you click the persons name (e.g. "Jane Doe"). I'm using an equal heights plugin to keeps the columns to match each other, e.g.
<span class="views-bio-left equal-title" style="height: 180px; overflow: auto;">
content
</span>
<span class="views-bio-right equal-title" style="height: 180px; overflow: auto;">
content
</span>

So far I've got the expanding part working and the equal heights part working when the page loads. However when you click the person's name, all of the people's bio's expand when I'd like only the one associated with each person at a time. 
Example of text in question for each person that gets expanded is:
<span class="field-group-format-wrapper" style="display: none;">
<p>Ad antehabeo autem consequat fere jus letalis nisl patria tego. Ad aptent esse eum fere ibidem iusto pecus.</p>
</span>

I'm using this code for that:
// Equal heights for expanded text.
// This one expands all hidden text spans, not just the indivudial span being expanded
$(window).click(function () {
    $(".field-group-format-toggler-abstract").each(function () {
        $(".equal-title").css('height','auto').equalHeights();
    });
});

I figured using .each(function () would help focus on only expanding the associated hidden text and not all of them on the page but that's not the case so I am at a loss. 

A:

use 
$(".field-group-format-toggler-abstract").next(function () {

instead of:
$(".field-group-format-toggler-abstract").each(function () {

http://jsfiddle.net/EuLHd/
and why this works:
.each() Iterates over a jQuery object, executing a function for each matched element, so all your elements that matched the class name were getting triggered.
.next() Gets the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector. (so basically it grabs the first item in your group of elements that match your class selector name).
new fiddle: http://jsfiddle.net/UcjYT/ this one will accommodate a variable number of items
In essence we are grabbing the number of items retrieved by the selector
$(".equal-title").length;

Then we do a for loop to iterate through the items, while doing so, the .slice() method is applied to the selectors, the slice method allows you to grab a range of items that were matched from the selector, so we are grabbing the two selectors that match the item that was clicked, and then apply the equalHeight method.
$(".equal-title").slice(i, i+2).css('height', 'auto').equalHeights();

Hope this helps!

