I'm having a problem creating a script that hides all but the first few lines of a <div>.
I would like only the first 3 lines to be shown, and then a 'Read more...' link, with the rest of the <div> hidden.
When the user clicks on the 'Read More...' link, the <div> expands to show its full content, with a 'Read Less...' link at the end.
When the user clicks 'Read Less...', the <div> goes back to just showing the first 3 lines.
I am assuming this is a CSS & Javascript requirement, but cannot figure out where to start.
Thanks in advance.
Edit: If this can be done using a .class CSS tag, that would be great, as I will probably need it on more than one DIV. Thanks.
function showMore(link_id,elemId) { linkObj = document.getElementById(link_id); //display the more content for this elemId document.getElementById(elemId).style.display='block'; //change the links attributes to hide the more content linkObj.href = 'javascript:hideMore("'+link_id+'","'+elemId+'")'; linkObj.innerHTML = "Show less"; }
function hideMore(link_id,elemId) { linkObj = document.getElementById(link_id); //hide the more content for this elemId document.getElementById(elemId).style.display='none'; //change the links attributes to show the more content linkObj.href = 'javascript:showMore("'+link_id+'","'+elemId+'")'; linkObj.innerHTML = "Show more"; }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>read more</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
window.onload=function() {
var read = document.body.getElementsByTagName('p');
for(var i=0; i<read.length; i++) {
if(read[i].className=='read') {
read[i].className+=' less';
var more=document.createElement('span');
more.appendChild(document.createTextNode('Read more ...'));
more.className='readmore';
more.onclick=function(){moreLess(this);};
read[i].appendChild(more);
}
}
};
function moreLess(obj) {
var cn=obj.parentNode.className;
var txt='';
if(cn.indexOf('less')!=-1) {
cn=cn.replace(/less/g,'more');
txt='Read less ...';
}
else {
cn=cn.replace(/more/g,'less');
txt='Read more ...';
}
obj.parentNode.className=cn;
obj.firstChild.data=txt;
}
</script>
<style type="text/css">
body {
font-size:80%;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
}
.read {
position:relative;
width:25em;
border:1px solid #9cf;
padding:0.5em;padding-bottom:1.2em;
}
.more {
height:auto;
}
.less {
height:4em; /* lines of text shown + link */
overflow:hidden;
}
.readmore {
position:absolute;
width:25em;
bottom:0;left:0;
cursor:pointer;
color:blue;
background:#fff;
padding:0 0 0 0.5em;
}
</style>
</head>
<body>
<p class="read">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima.</p>
<p class="read">Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Nam liber tempor *** soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Nam liber tempor *** soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</body>
</html>
At least 98% of internet users' DNA is identical to that of chimpanzees
Excellent! thank you all, this code saved my day!!!
I have copied the code provided by Fang, I would like to display 2 lines text(including readmore link). Everyhting is working fine but the "Read more..." is diplaying on top of actual text means overlapping, I could not figure out the problem because I'm poor at css. (but Read less is diplaying correctly in the last line...) please help me what I need to chane. But one difference is I have paragraph inside the "td", does it make any difference?
[RESOLVED] Only show first few lines of <div>
Reply With Quote
Bookmarks