i want doing a project then i need something similiar like the “more” link
I have a long text but i want to display only a certain number of text if i click on the “More” this link it will appear those text that is being hide
Like those people have a very long comment, Facebook will appear a short text and it use the “More” link to display the rest of the text
So how to create using JavaScript language ?
Urgently need help in this!!!
There’s a couple of ways you can do this, depending on the length of the content, how many items are displayed and the type of content it might be better to limit the text through PHP and then request the rest through AJAX.
Since I guess this is a few steps too far and probably not needed, this is how you do it with pure jQuery.
(If you aren’t using jQuery yet, download it from jquery.com, it improves javascript by a lot and you’ll need it to use the following code)
Imagine your HTML looks like this:
<div class="item">
This is the first part of the text, the part that will be seen originally.<br/>
<a href="#" class="read_more">Read More</a><br/>
<span class="more_text">
This is the extra text, that will be shown after pressing the link above.
</span>
</div>
What we’re going to do through jQuery is find all ‘a’ elements with the read_more class, and bind those to an event that will show the span.more_text that is next to it.
$(function(){ /* to make sure the script runs after page load */
$('a.read_more').click(function(event){ /* find all a.read_more elements and bind the following code to them */
event.preventDefault(); /* prevent the a from changing the url */
$(this).parents('.item').find('.more_text').show(); /* show the .more_text span */
});
});
Actually, you could take it a step further if you really want to be lazy with the HTML.
Simply use this HTML:
<div class="item">
Text goes in here.
</div>
With this jQuery (explanations inside the code again):
$(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"><br/>Read More</a>'+
'<span class="more_text" style="display:none;">'+long_content+'</span>'); /* 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 */
$(this).parents('.item').find('.more_text').show(); /* show the .more_text span */
});
}
});
});
hi, just want to ask the javascript code can don’t use jquery like pure javascript…cause i need to hide long text and show a shorter version …so i have the below cause…what code should i add to count the text so that the extra words are hide and a show more link is presented to user.
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == ‘none’)
{document.getElementById(divId).style.display=‘block’;}
else{document.getElementById(divId).style.display = ‘none’;}
}
</script>
i need something like what you comment in your second comment but i cannot use jquery
Why can you not use jQuery, there is absolutely no reason not to.
Because i am going to use this in the infowindow as i doing project related to map, and i am not sure how to use the jquery into the infowindow…or do you know how to incooperate with the infowindow
Hmm, I haven’t tried using jQuery inside google maps before so sadly enough I won’t be able to help you with that (doesn’t it just work if jQuery is included on the page as well?).
I also never write Javascript without jQuery, so I wouldn’t know how to do it in pure Javascript either 
oh okay
but i saw this code but it don’t work for firefox
<script language=“JavaScript”>
function truncate() {
var len = 100;
var p = document.getElementById(‘truncateMe’);
if (p) {
var trunc = p.innerHTML;
if (trunc.length > len) {
trunc = trunc.substring(0, len);
trunc = trunc.replace(/\\w+$/, '');
/* Add an ellipses to the end and make it a link that expands
the paragraph back to its original size */
trunc += '<a href="#" ' +
'onclick="this.parentNode.innerHTML=' +
'unescape(\\''+escape(p.innerHTML)+'\\');return false;">' +
'<span style="font-size: 10px;">[ more ... ]</span><\\/a>';
p.innerHTML = trunc;
}
}
}
</script>