georgebyte/show-more-animated.html

## show-more-animated.html
<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function()
        {
            $("#toggle_link").click(function(event){
                event.preventDefault();
                var heightExpanded = $("#box").get(0).scrollHeight - 2 * parseInt($("#box").css('padding'));
                var currentHeight = $("#box").height();
                if (currentHeight == heightExpanded) {
                    $("#toggle_link").html("Show more");
                    $("#box").animate({height:"90px"});
                }
                else {
                    $("#toggle_link").html("Show less");
                    $("#box").animate({height:heightExpanded+"px"});
                }
            });
        });
    </script>
</head>
<body>
    <div id="box" style="border:1px solid black;height:90px;width:400px;padding:10px;overflow:hidden;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin, odio ut varius dictum, leo arcu aliquam eros, quis gravida erat turpis vitae tellus. Aenean ut mi congue, tristique mauris nec, fermentum augue. Morbi rhoncus felis non purus pharetra, sit amet consectetur erat aliquet. Curabitur tristique tempor dictum. Donec rhoncus tellus eget laoreet egestas. Morbi iaculis ultrices nulla eget elementum. Quisque sodales nunc sit amet purus fermentum, id ullamcorper ipsum porttitor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, nulla ac cursus luctus, erat leo hendrerit nisi, ac sagittis leo lacus ut justo. Fusce eget fringilla odio. Suspendisse euismod libero sit amet ipsum scelerisque pharetra a sed sapien. Duis ultricies eleifend ante eu accumsan.

        Suspendisse eget arcu id justo semper posuere. Cras dignissim euismod arcu vel ornare. Mauris rhoncus fringilla mauris placerat dictum. Aenean hendrerit eu quam eu hendrerit. Phasellus ultricies porta eros. Nulla facilisi. Pellentesque dignissim gravida libero, vitae lobortis sem imperdiet ac.

        Maecenas vehicula consectetur venenatis. Nulla facilisi. Maecenas convallis iaculis turpis, vitae cursus tellus porta ut. Donec odio massa, aliquet et convallis vehicula, blandit vel metus. Suspendisse diam eros, porttitor eget ultrices eget, euismod nec nulla. Aenean eu dapibus urna. Ut mattis neque adipiscing mi consequat, ut cursus urna volutpat.

        Donec non sollicitudin turpis, at aliquam massa. Vivamus varius viverra ante, ac venenatis magna gravida vulputate. Aliquam interdum enim ac tristique tincidunt. Aenean vitae eros quam. Fusce rutrum bibendum mattis. Sed interdum scelerisque est et convallis. Proin mollis eleifend lacus faucibus condimentum. Etiam blandit augue eget tincidunt sagittis. Praesent non orci velit. Phasellus rutrum at mi in scelerisque.

        Sed rutrum sit amet libero nec iaculis. Etiam mauris eros, porta vestibulum pretium vitae, rutrum a est. Integer ut neque eu nisl porttitor congue. Pellentesque porttitor viverra adipiscing. Suspendisse luctus elementum luctus. Donec at rutrum mi. Aenean egestas luctus nibh, id tincidunt libero malesuada vitae. Quisque in ligula id tortor tincidunt pulvinar sit amet convallis mauris.
    </div>
    <a href="#" id="toggle_link" style="width:400px;text-align:center;display:block;">Show more</a>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script>
	$(document).ready(function()
	{
	$("#toggle_link").click(function(event){
	event.preventDefault();
	var heightExpanded = $("#box").get(0).scrollHeight - 2 * parseInt($("#box").css('padding'));
	var currentHeight = $("#box").height();
	if (currentHeight == heightExpanded) {
	$("#toggle_link").html("Show more");
	$("#box").animate({height:"90px"});
	}
	else {
	$("#toggle_link").html("Show less");
	$("#box").animate({height:heightExpanded+"px"});
	}
	});
	});
	</script>
	</head>
	<body>
	<div id="box" style="border:1px solid black;height:90px;width:400px;padding:10px;overflow:hidden;">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin, odio ut varius dictum, leo arcu aliquam eros, quis gravida erat turpis vitae tellus. Aenean ut mi congue, tristique mauris nec, fermentum augue. Morbi rhoncus felis non purus pharetra, sit amet consectetur erat aliquet. Curabitur tristique tempor dictum. Donec rhoncus tellus eget laoreet egestas. Morbi iaculis ultrices nulla eget elementum. Quisque sodales nunc sit amet purus fermentum, id ullamcorper ipsum porttitor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, nulla ac cursus luctus, erat leo hendrerit nisi, ac sagittis leo lacus ut justo. Fusce eget fringilla odio. Suspendisse euismod libero sit amet ipsum scelerisque pharetra a sed sapien. Duis ultricies eleifend ante eu accumsan.

	Suspendisse eget arcu id justo semper posuere. Cras dignissim euismod arcu vel ornare. Mauris rhoncus fringilla mauris placerat dictum. Aenean hendrerit eu quam eu hendrerit. Phasellus ultricies porta eros. Nulla facilisi. Pellentesque dignissim gravida libero, vitae lobortis sem imperdiet ac.

	Maecenas vehicula consectetur venenatis. Nulla facilisi. Maecenas convallis iaculis turpis, vitae cursus tellus porta ut. Donec odio massa, aliquet et convallis vehicula, blandit vel metus. Suspendisse diam eros, porttitor eget ultrices eget, euismod nec nulla. Aenean eu dapibus urna. Ut mattis neque adipiscing mi consequat, ut cursus urna volutpat.

	Donec non sollicitudin turpis, at aliquam massa. Vivamus varius viverra ante, ac venenatis magna gravida vulputate. Aliquam interdum enim ac tristique tincidunt. Aenean vitae eros quam. Fusce rutrum bibendum mattis. Sed interdum scelerisque est et convallis. Proin mollis eleifend lacus faucibus condimentum. Etiam blandit augue eget tincidunt sagittis. Praesent non orci velit. Phasellus rutrum at mi in scelerisque.

	Sed rutrum sit amet libero nec iaculis. Etiam mauris eros, porta vestibulum pretium vitae, rutrum a est. Integer ut neque eu nisl porttitor congue. Pellentesque porttitor viverra adipiscing. Suspendisse luctus elementum luctus. Donec at rutrum mi. Aenean egestas luctus nibh, id tincidunt libero malesuada vitae. Quisque in ligula id tortor tincidunt pulvinar sit amet convallis mauris.
	</div>
	<a href="#" id="toggle_link" style="width:400px;text-align:center;display:block;">Show more</a>
	</body>
	</html>