I want to have a text to only be a certain amount of characters/length and after that length, I want to put a link to reveal the full length of the text.
The link will be (more...). And once the user clicks the link (more..) the rest of the text will slide down.
How would I accomplish this?
Heres an example.
blah blah blah blah blah (more...)
When the user clicks (more..), it will show the entire text.
NOTE: I am taking a about data in a table row/table cell, not just any text.
The secret about this effect, is wrapping the parts that you want to control with HTML tags.
$(".more").toggle(function(){
$(this).text("less..").siblings(".complete").show();
}, function(){
$(this).text("more..").siblings(".complete").hide();
});
<span class="teaser">text goes here</span>
<span class="complete"> this is the
complete text being shown</span>
<span class="more">more...</span>
Online demo here: http://jsfiddle.net/zA23k/215/
$('#more').click(function(e) {
e.stopPropagation();
$('div').css({
'height': 'auto'
})
});
$(document).click(function() {
$('div').css({
'height': '40px'
})
})
Click on Read more to expand the text. Click outside to minimize it again.
I know this question is a little old (and has had it's answer selected already) but for those wanting another option that're coming across this question through Google (like I did), I found this dynamic text shortener:
Dynamically shortened Text with “Show More” link using jQuery
I found it was better because you could set the character limit, rather than extra spans in the code, or setting a specific height to a container.
Hope it helps someone else out!
I needed this functionality for an RSS feed on our company's website. This is what I came up with:
// Create Variables
var allOSB = [];
var mxh = '';
window.onload = function() {
// Set Variables
allOSB = document.getElementsByClassName("only-so-big");
if (allOSB.length > 0) {
mxh = window.getComputedStyle(allOSB[0]).getPropertyValue('max-height');
mxh = parseInt(mxh.replace('px', ''));
// Add read-more button to each OSB section
for (var i = 0; i < allOSB.length; i++) {
var el = document.createElement("button");
el.innerHTML = "Read More";
el.setAttribute("type", "button");
el.setAttribute("class", "read-more hid");
insertAfter(allOSB[i], el);
}
}
// Add click function to buttons
var readMoreButtons = document.getElementsByClassName("read-more");
for (var i = 0; i < readMoreButtons.length; i++) {
readMoreButtons[i].addEventListener("click", function() {
revealThis(this);
}, false);
}
// Update buttons so only the needed ones show
updateReadMore();
}
// Update on resize
window.onresize = function() {
updateReadMore();
}
// show only the necessary read-more buttons
function updateReadMore() {
if (allOSB.length > 0) {
for (var i = 0; i < allOSB.length; i++) {
if (allOSB[i].scrollHeight > mxh) {
if (allOSB[i].hasAttribute("style")) {
updateHeight(allOSB[i]);
}
allOSB[i].nextElementSibling.className = "read-more";
} else {
allOSB[i].nextElementSibling.className = "read-more hid";
}
}
}
}
function revealThis(current) {
var el = current.previousElementSibling;
if (el.hasAttribute("style")) {
current.innerHTML = "Read More";
el.removeAttribute("style");
} else {
updateHeight(el);
current.innerHTML = "Show Less";
}
}
function updateHeight(el) {
el.style.maxHeight = el.scrollHeight + "px";
}
// thanks to karim79 for this function
// http://stackoverflow.com/a/4793630/5667951
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}@import url('https://fonts.googleapis.com/css?family=Open+Sans:600');
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
}
h1 {
text-align: center;
}
.main-container {
margin: 30px auto;
max-width: 1000px;
padding: 20px;
}
.only-so-big p {
padding: 0;
margin: 0;
}
p {
font-size: 15px;
line-height: 20px;
}
hr {
background: #ccc;
display: block;
height: 1px;
width: 100%;
}
/*
NECESSARY SECTION
*/
.only-so-big {
background: rgba(178, 252, 255, .3);
height: 100%;
max-height: 100px;
overflow: hidden;
-webkit-transition: max-height .75s;
transition: max-height .75s;
}
.read-more {
background: none;
border: none;
color: #1199f9;
cursor: pointer;
font-size: 1em;
outline: none;
}
.read-more:hover {
text-decoration: underline;
}
.read-more:focus {
outline: none;
}
.read-more::-moz-focus-inner {
border: 0;
}
.hid {
display: none;
}<div class="main-container">
<h1>Controlling Different Content Size</h1>
<p>We're working with an RSS feed and have had issues with some being much larger than others (content wise). I only want to show the "Read More" button if it's needed.</p>
<div class="only-so-big">
<p>This is just a short guy. No need for the read more button.</p>
</div>
<hr>
<div class="only-so-big">
<p>This one has way too much content to show. Best be saving it for those who want to read everything in here.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi THE END!</p>
</div>
<hr>
<div class="only-so-big">
<p>Another small section with not a lot of content</p>
</div>
<hr>
<div class="only-so-big">
<p>Make Window smaller to show "Read More" button.<br> totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed?</p>
</div>
</div>
For those who just want a simple Bootstrap solution.
<style>
.collapse.in { display: inline !important; }
</style>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
<span class="collapse" id="more">
1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</span>
<span><a href="#more" data-toggle="collapse">... <i class="fa fa-caret-down"></i></a></span>
Here's a CodePen example (expand & collapse).
Remember to include jquery and bootstrap.min.js in your header.
If you aren't using fontawesome icons, change <i class="fa fa-caret-down"></i> to any icon of your choice.
If you need some complete solution, you can use this :
http://jsfiddle.net/7Vv8u/2703/
JS (jQuery)
var text = $('.text-overflow'),
btn = $('.btn-overflow'),
h = text.scrollHeight;
if(h > 120) {
btn.addClass('less');
btn.css('display', 'block');
}
btn.click(function(e)
{
e.stopPropagation();
if (btn.hasClass('less')) {
btn.removeClass('less');
btn.addClass('more');
btn.text('Show less');
text.animate({'height': h});
} else {
btn.addClass('less');
btn.removeClass('more');
btn.text('Show more');
text.animate({'height': '120px'});
}
});
HTML
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<div class="text-overflow">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<a class="btn-overflow" href="#">Show more</a>
CSS
.text-overflow {
width:250px;
height:120px;
display:block;
overflow:hidden;
word-break: break-word;
word-wrap: break-word;
}
.btn-overflow {
display: none;
text-decoration: none;
}
This is another solution using clickable articles (can of course be changed to anything).
Edit: If you want to use CSS animation, you must use MAX-HEIGHT instead of HEIGHT
Javascript
$(".container article").click(function() {
$(this).toggleClass("expand");
})
CSS
.container {
position: relative;
width: 900px;
height: auto;
}
.container article {
position: relative;
border: 1px solid #999;
height: auto;
max-height: 105px;
overflow: hidden;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.container article:hover {
background: #dadada;
}
.container article.expand {
max-height: 900px;
}
HTML
<div class="container">
<article class="posts-by-cat_article-222">
<h3><a href="http://google.se">Section 1</a></h3>
<p>This is my super long content, just check me out.</p>
<p>This is my super long content, just check me out.</p>
<p>This is my super long content, just check me out.</p>
<p>This is my super long content, just check me out.</p>
</article>
<article class="posts-by-cat_article-222">
<h3><a href="http://google.se">Section 2</a></h3>
<p>This is my super long content, just check me out.</p>
<p>This is my super long content, just check me out.</p>
<p>This is my super long content, just check me out.</p>
<p>This is my super long content, just check me out.</p>
</article>
</div>
Here's a really simple solution that worked for me,
<span id="text">Extra Text</span>
<span id="more">show more...</span>
<span id="less">show less...</span>
<script>
$("#text").hide();
$("#less").hide();
$("#more").click( function() {
$("#text").show();
$("#less").show();
$("#more").hide();
});
$("#less").click( function() {
$("#text").hide();
$("#less").hide();
$("#more").show();
});
</script>
Another possible solution that we can use 2 HTML element to store brief and complete text. Hence we can show/hide appropriate HTML element :-)
<p class="content_description" id="brief_description" style="display: block;"> blah blah blah blah blah </p><p class="content_description" id="complete_description" style="display: none;"> blah blah blah blah blah with complete text </p>
/* jQuery code to toggle both paragraph. */
(function(){
$('#toggle_content').on(
'click', function(){
$("#complete_description").toggle();
$("#brief_description").toggle();
if ($("#complete_description").css("display") == "none") {
$(this).text('More...');
} else{
$(this).text('Less...');
}
}
);
})();
So much answers and all them good, but I will suggest my own, maybe it will be usefull for somebody.
We have HTML in the template:
<div class="listing-item-excerpt" id="listing-item-excerpt-<?= $task['id'] ?>">
<?= mb_substr($txt, 0, 150) ?><span class="complete_txt"><?= mb_substr($txt, 150) ?></span>
<a href="javascript: show_more_less(<?= $task['id'] ?>);void(0);" class="more_less_btn" data-more-txt="<?= __('... show more') ?>" data-less-txt=" <?= __('show less') ?>" data-state="0"><?= __('... show more') ?></a>
</div>
JS function for toggling which:
function show_more_less(task_id) {
var btn = jQuery('#listing-item-excerpt-' + task_id).find('.more_less_btn');
var txt_container = jQuery('#listing-item-excerpt-' + task_id).find('.complete_txt');
var state = parseInt(jQuery(btn).data('state'), 10);
if (state === 0) {
jQuery(txt_container).show();
jQuery(btn).text(jQuery(btn).data('less-txt'));
jQuery(btn).data('state', 1);
} else {
jQuery(txt_container).hide();
jQuery(btn).text(jQuery(btn).data('more-txt'));
jQuery(btn).data('state', 0);
}
}
You can use like this
$(".jsgrid-cell").each(function(i,v){
var txt=$(v).text();
if(txt.length>100){
var shortText=txt.substring(0, 100)+
"<span onclick='$(this).hide();$(this).next().toggle();'>"+
"..."+
"</span>"+
"<span style='display:none'>"+
txt.substring(100, txt.length)+
"</span>";
$(v).html(shortText );
}
});
Put text inside
Your Text Hereand copy the script inside your js file. You are ready to go. Working code for see more.. and see less.. options. Works for dynamic as well as static texts
<div class="item">
Your Text Here
</div>
<script type="text/javascript">
$(function(){ /* to make sure the script runs after page load */
$('.item').each(function(event){ /* select all divs with the item class */
var max_length = 150; /* set the max content length before a read more link will be added */
if($(this).html().length > max_length){ /* check for content length */
var short_content = $(this).html().substr(0,max_length); /* split the content in two parts */
var long_content = $(this).html().substr(max_length);
$(this).html(short_content+'<a href="#" class="read_more">Show More</a>'+
'<span class="more_text" style="display:none;">'+long_content+'</span>'+'<a href="#" class="read_less" style="display:none;">Show Less</a>'); /* Alter the html to allow the read more functionality */
$(this).find('a.read_more').click(function(event){ /* find the a.read_more element within the new html and bind the following code to it */
event.preventDefault(); /* prevent the a from changing the url */
$(this).hide(); /* hide the read more button */
$('.read_less').show(); /* show read less button */
$(this).parents('.item').find('.more_text').show(); /* show the .more_text span */
});
$(this).find('a.read_less').click(function(event){
event.preventDefault();
$(this).hide(); /* hide the read more button */
$('.read_less').hide();
$('.read_more').show();
$(this).parents('.item').find('.more_text').hide();
});
}
});
});
</script>
HTML
<div>asdasdasdasd
<br>asdasdasdasd
<br>asdasdasdasd
<br>asdasdasdasd
<br>asdasdasdasd
<br>asdasdasdasd
<br>asdasdasdasd
<br>asdasdasdasd
<br>asdasdasdasd
<br>asdasdasdasd
<br>asdasdasdasd
<br>asdasdasdasd
<br>asdasdasdasd
<br>asdasdasdasd
<br>
</div>
<a id="more" href="#">Read more </a>
<a id="less" href="#">Read less </a>
CSS
<style type="text/css">
div{
width:100px;
height:50px;
display:block;
border:1px solid red;
padding:10px;
overflow:hidden;
}
</style>
jQuery
<link rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/start/jquery-ui.css"
type="text/css" media="all" />
<script type="text/javascript">
var h = $('div')[0].scrollHeight;
$('#more').click(function(e) {
e.stopPropagation();
$('div').animate({
'height': h
})
$('#more').hide();
$('#less').show();
});
$('#less').click(function(e) {
$('#more').show();
$('#less').hide();
});
$(document).click(function() {
$('div').animate({
'height': '50px'
})
})
$(document).ready(function(){
$('#less').hide();
})
</script>
Updated @Hussein solution with preview height that will adapt to the paragraph number of lines.
So with this bit of code : - You can choose the number of lines you want to show in preview, it will works for all screen sizes, even if font-size is responsive. - There is no need to add classes or back-end editing to separate preview from whole content.
http://jsfiddle.net/7Vv8u/5816/
var h = $('div')[0].scrollHeight;
divLineHeight = parseInt($('div').css('line-height'));
divPaddingTop = parseInt($('div').css('padding-top'));
lineToShow = 2;
divPreviewHeight = divLineHeight*lineToShow - divPaddingTop;
$('div').css('height', divPreviewHeight );
$('#more').click(function(e) {
e.stopPropagation();
$('div').animate({
'height': h
})
});
$(document).click(function() {
$('div').animate({
'height': divPreviewHeight
})
})
Another good solution could be to put a fixed height on your div container to show only a part of your text and then insert a function that on click on a link (something like "more...") it changes the div height to auto the CSS:
`$("#more").click(function(){
$(".container").css({"height": "auto" }); });`
You can link the text expansion to an actual text link, like I needed to do, using the code from this page, I ended up with :
<a href="#" id="emailvisible">
<H5>Change your email</H5>
</a>
<h5 id = "emailshow">To change the email enter your current email, the new email, and then click the submit button.</h5>
$.fn.clicktoggle = function(a, b) {
return this.each(function() {
var clicked = false;
$(this).click(function() {
if (clicked) {
clicked = false;
return b.apply(this, arguments);
}
clicked = true;
return a.apply(this, arguments);
});
});
};
$("#emailvisible").toggle(function(){
$(this).text("Change your email").siblings("#emailshow").show();
}, function(){
$(this).text("Change your email").siblings("").hide();
});
#emailshow{
display:none;
}
