1

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.

Danny Englander
  • 2,005
  • 5
  • 26
  • 41

1 Answers1

1

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!

Popo
  • 2,402
  • 5
  • 33
  • 55
  • I just realized that the equalheights plugin breaks with using `.next(function ()`. Not sure why that's happening. – Danny Englander May 08 '13 at 00:36
  • i will look at it, what browser are you using btw? – Popo May 08 '13 at 00:46
  • The latest versions of Chrome and Firefox. Thanks. – Danny Englander May 08 '13 at 02:38
  • is this what you were trying to do? check out the fiddle: http://jsfiddle.net/kx96m/ – Popo May 08 '13 at 14:23
  • yes, exactly but the new method won't be extendable. Sometimes there might be 12 `
  • ` rows on a page so I can't account for having to put in all the slices as you have it. Getting closer to a solution though. I've been playing with the code all morning but still no dice. It seems it shouldn't be that hard. Thanks.
    • – Danny Englander May 08 '13 at 14:32
  • @DannyEnglander I updated the jsfiddle link in the answer with an example that allows for extendable list items. – Popo May 08 '13 at 15:23
  • Yep that works. Now I need to look at your code and try to understand it, it looks a bit complex. Thanks again for the extra effort! – Danny Englander May 08 '13 at 15:47