Skip to content

Instantly share code, notes, and snippets.

@willhalling

willhalling/read-more-example.html

Created July 19, 2013 09:38
Show Gist options
  • Save willhalling/6037968 to your computer and use it in GitHub Desktop.
Save willhalling/6037968 to your computer and use it in GitHub Desktop.
Download ZIP
Read/hide text after a certain amount of characters.
Raw
read-more-example.html
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<title>Read More Example (with character count)</title>
<style type="text/css">
a:visited {color:#0254eb}
.ccount {width:400px; background-color:#f0f0f0; margin:10px}
.morecontent span {display:none}
</style>
<script type="text/javascript">
$(function() {
character_count = $('.ccount').attr('data-ccount');
// can change these
var showChar = character_count;
var ellipsestext = "...";
var moretext = "Read More";
var lesstext = "Read Less";
$('.more').each(function () {
var content = $(this).html();
if (content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar - 1, content.length - showChar);
var html = c + '<span class="moreelipses">' + ellipsestext + '</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
$(this).html(html);
}
});
$(".morelink").click(function () {
if ($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
</head>
<body>
<div class="ccount more" data-ccount="100">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum laoreet, nunc eget laoreet sagittis,
quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
Duis eget nisl orci. Aliquam mattis purus non mauris
blandit id luctus felis convallis.
Integer varius egestas vestibulum.
Nullam a dolor arcu, ac tempor elit. Donec.
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment