如何动画div的全高？

Question

I have three div's and I have function that shows full content of them when I click on button. But I think that function is too complex, I want something without so many if statements.

If I had 10 div's this function would be too long, how to make it shorter?

$(document).ready(function () {
var h1 = $(".pt1").height(), h2 = $(".pt2").height(), h3 = $(".pt3").height();
$(".post-text").height("72px");
var read = $(".post-read");

read.click(function () {
    if ($(this).html() === 'Read more') {
        $(this).html("Show less");
        if ($(this).prev().attr('class') == "post-text pt1") {
            $(this).prev().animate({
                height : h1
            }, 'slow');
        } else if ($(this).prev().attr('class') == "post-text pt2") {
            $(this).prev().animate({
                height : h2
            }, 'slow');
        } else {
            $(this).prev().animate({
                height : h3
            }, 'slow');
        }
    } else {
        $(this).html("Read more");
        $(this).prev().animate({
            height : 72
        }, 'slow');
    }
});
});

HTML:

<div id="tabs-1">
                <div class="post">
                    <div class="post-img">
                        <img alt="" src="img/post-pic.png">
                    </div>
                    <div class="post-text pt1">Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                        Pellentesque habitant morbi tristique senectus et netus et male- suada fames Pellentesque habitant
                        morbi tristique senectus et netus et malesuada fames Pellentesque habitant morbi tristique senectus et
                        netus et male- suada fames Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                        Pellentesque habitant morbi tristique senectus et netus et male- suada fames Pellentesque habitant
                        morbi tristique senectus et netus et malesuada fames Pellentesque habitant morbi tristique senectus et
                        netus et male- suada fames</div>

                    <div class="post-read">Read more</div>
                    <div class="clear"></div>
                </div>
                <div class="post">
                    <div class="post-img">
                        <img alt="" src="img/post-pic.png">
                    </div>
                    <div class="post-text pt2">Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                        Pellentesque habitant morbi tristique senectus et netus et male- suada fames Pellentesque habitant
                        morbi tristique senectus et netus et malesuada fames Pellentesque habitant morbi tristique senectus et
                        netus et male- suada fames Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                        Pellentesque habitant morbi tristique senectus et netus et male- suada fames Pellentesque habitant
                        morbi tristique senectus et netus et malesuada fames Pellentesque habitant morbi tristique senectus et
                        netus et male- suada fames Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                        Pellentesque habitant morbi tristique senectus et netus et male- suada fames</div>
                    <div class="post-read">Read more</div>
                    <div class="clear"></div>
                </div>
                <div class="post">
                    <div class="post-img">
                        <img alt="" src="img/post-pic.png">
                    </div>
                    <div class="post-text pt3">Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                        Pellentesque habitant morbi tristique senectus et netus et male- suada fames Pellentesque habitant
                        morbi tristiquemorbi tristique senectus et netus.</div>
                    <div class="post-read">Read more</div>
                    <div class="clear"></div>
                </div>
            </div>

CSS:

.post {clear: both;width: 595px;padding-bottom: 30px;}
.post-img {width: 122px;background-color: #f8f6f1;box-shadow: 0px 0px 5px 1px #a09e99;float: left; }
.post-text {float: left;width: 457px; overflow:hidden;padding-left: 16px;}
.post-read {float: right;background: url(img/arrow.png) no-repeat right center transparent;padding-right: 22px;margin-right: 12px;}

jsFiddle: link

Answer 1

This is the situation when you should write jQuery plugin. This is easy:

(function ($) {
    $.fn.readMore = function () {
        return this.each(function () {
            var h = $(this).height();
            $(this).height("72px");
            $(this).next().click(function () {
                if ($(this).html() === 'Read more') {
                    $(this).html("Show less");
                    if ($(this).prev().hasClass('post-text')) {
                        $(this).prev().animate({
                            height: h
                        }, 'slow');
                    }
                }
                else {
                    $(this).html("Read more");
                    $(this).prev().animate({
                        height: 72
                    }, 'slow');
                }
            });
        });
    };
})(jQuery);

$(function() {
    $('.post-text').readMore();
});

http://jsfiddle.net/dfsq/S9KEz/1/

This is a scetch, you should improve it. For example you should not use such a comparison like $(this).html() === 'Read more' - your code will stop working if you change the text.

Answer 2

I think this could work:

read.click(function () 
{
   if ($(this).html() === 'Read more') 
   {
      $(this).html("Show less");

      var thisClass = $(this).prev().attr('class');
      var thisId = thisClass.replace('post-text ', '');
      var thisHeight = $('.' + thisId).height();

      $(this).prev().animate(
      {
          height : thisHeight
      }, 'slow'); 
   } 
   else 
   {
        $(this).html("Read more");
        $(this).prev().animate({
            height : 72
        }, 'slow');
   }
});