jQuery toggle content with fixed initial height
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:#F60;
font-weight:bold;
}
.toggle-link:hover {
color:#333;
}
.description {
height:50px;
overflow:hidden;
}
JavaScript
$(document).ready(function () {
$('.toggle-link').toggle(function () {
$('.description').animate({
height: 200
}, 600);
$('.toggle-link').html("-");
}, function () {
$('.description').animate({
height: 50
}, 600);
$('.toggle-link').html("+");
});
});