Question

@roXon solved this. See his response below should you be interested in using this.

I’m using the jquery’s ‘tabs’ plus a ‘read more’ functionality for each of my articles, but the read more is not functioning as it should. The ‘read more’ is not extending to each of my articles, it’s only working on the first (top) article.

Demo: http://fiddle.jshell.net/evanmoore/yNC9G/1/show/

Fiddle: http://jsfiddle.net/evanmoore/yNC9G/1/

Answer 1

DEMO

used:

$(this).parent().prev('.wrap').animate({

You had an extra comma and some little errors.

What have I done to make it work:
on top I created an each method for your .wrap – to store into .data() each .wrap height.

$(function(){
    $('#postsBig .wrap').each(function(){
        var wraph = $(this).height();
        $(this).data('h',wraph);
    });
});

Than I isolated the script if that checks if the .wrap need to have the ‘footer’ read more.

$('.wrap').each(function(){
    var wrap = $(this);
    var wraph = wrap.data('h');
    if(wraph >= slideHeight){
        wrap.height(slideHeight);
        wrap.next('.read-more').append('<a href="#">Click to Read More</a>');
    }
});

Than I just edited a bit your codes to get the good element to trigger and the search for the proper .data height for the right .wrap element:

$('.read-more a').click(function(){
    var defHeight = $(this).parent().prev('.wrap').data('h');
    var curHeight = $(this).parent().prev('.wrap').height();
    if(curHeight <= slideHeight){
        $(this).parent().prev('.wrap').animate({
          height: defHeight
        }, 500);
        $(this).html('Close');
    }else{
        $(this).parent().prev('.wrap').animate({
          height: slideHeight
        }, 500);
        $(this).html('Click to Read More');
    }
    return false;
});