Question

I cannot seem to get this. Everyone else examples or questions use different functions or are not variable height. In addition, they are all the same class so my other issue is adding id’s to this mess….That being said Im very stuck. Ill take any advice I can get. Thank you for you help.

  $(function(){
    var slideHeight = 36; // px
    var defHeight = $('.jswrap').height();
    if(defHeight >= slideHeight){
        $('.jswrap').css('height' , slideHeight + 'px');
        $('.jsreadmore').append('<a href="#">Read More</a>');
        $('.jsreadmore a').click(function(){
            var curHeight = $('.jswrap').height();
            if(curHeight == slideHeight){
                $('.jswrap').animate({
                  height: defHeight
                }, "normal");
                $('.jsreadmore a').html('Close');
            }else{
                $('.jswrap').animate({
                  height: slideHeight
                }, "normal");
                $('.jsreadmore a').html('Read More');
            }
            return false;
        });
    }
    });

Markup:

<div class="jscontainer">
  <h4>title</h4>
      <div class="jswrap">
        <p>Content</p>
      </div>
</div>

<div class="jscontainer">
  <h4>title2</h4>
      <div class="jswrap">
        <p>Content</p>
      </div>
</div>        

here is the problem

Answer 1

Is this what you are trying to do: http://jsfiddle.net/5VdBk/?

Does it need to work with multiple slides?

Edit
after noticed edit to question mentioning multiple slides:

Updated version which should handle multiple slides of varying content size
http://jsfiddle.net/5VdBk/1/