jQuery toggle content with fixed initial height

by John Doe

HTML

<div class="description">
    <p>I love icing faworki macaroon I love brownie. Jelly-o gingerbread donut oat cake cupcake. Pie cotton candy gingerbread candy tart. Fruitcake wypas dessert applicake jelly beans jelly beans.</p>
    <p>I love gummi bears caramels sesame snaps chocolate cake apple pie cookie brownie cheesecake. Pie tootsie roll I love. Caramels carrot cake pudding chocolate jelly-o carrot cake fruitcake wypas. Sweet roll carrot cake candy canes marshmallow lollipop pudding chupa chups. Dragée cotton candy gummi bears biscuit.</p>
</div>

<a href="#" class="toggle-link">+</a>

CSS

body                {font:14px/1.4 sans-serif; color:#333; padding:20px;}

.toggle-link        {font-size:20px; text-decoration:none; color:#FF5500; font-weight:bold;}
.toggle-link:hover  {color:#333;}

JavaScript

$(document).ready(function() {
    
    var $dscr = $('.description'),
        $switch = $('.toggle-link'),
        $initHeight = 40; // Initial height
    
    $dscr.each(function() {
        $.data(this, "realHeight", $(this).height());    // Create new property realHeight
        }).css({ overflow: "hidden", height: $initHeight + 'px' });

    $switch.toggle(function() {
          $dscr.animate({ height: $dscr.data("realHeight") }, 600);
          $switch.html("-");
          
        }, function() {
            $dscr.animate({ height: $initHeight}, 600);
            $switch.html("+");
        });
});