javascript - divの全高をアニメーション化するには?

Question

私は 3 つの div を持っており、ボタンをクリックするとそれらの完全なコンテンツを表示する機能があります。しかし、その関数は複雑すぎると思います。if文があまりないものが欲しいです。

10 個の div がある場合、この関数は長すぎます。短くするにはどうすればよいですか?

$(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:リンク

Answer 1

私はこれがうまくいくと思います：

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');
   }
});