Home » Blogs » sbutter's blog

jQuery More/Less text Test

Updated on Thu, 2014-12-11 14:37. Originally created by sbutter on 2014-12-11 14:37.
jQuery More/Less Text

jQuery More/Less Text

Testing out side the more block

Lets test this a bit more inside the more block. Now this is inside the more block.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery More/Less Text</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

$(function(){

// The height of the content block when it's not expanded
var adjustheight = 80;
// The "more" link text
var moreText = "+ More";
// The "less" link text
var lessText = "- Less";

// Sets the .more-block div to the specified height and hides any content that overflows
$(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');

// The section added to the bottom of the "more-less" div
$(".more-less").append('<p class="continued">[&hellip;]</p><a href="#" class="adjust"></a>');

$("a.adjust").text(moreText);

$(".adjust").toggle(function() {
$(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
// Hide the [...] when expanded
$(this).parents("div:first").find("p.continued").css('display', 'none');
$(this).text(lessText);
}, function() {
$(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
$(this).parents("div:first").find("p.continued").css('display', 'block');
$(this).text(moreText);
});
});

</script>
</head>

<body>

<div id="container">
<h1>jQuery More/Less Text</h1>
<div class="more-less">
<p> Testing out side the more block </p>

<div class="more-block">
<p>Lets test this a bit more inside the more block.</p>

</div>
</div>
</div>
</body>
</html>
»