<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#wrap
{
width:700px;
margin:auto;
border:3px double #222;
padding:5px;
font-family:Verdana,tahoma;
font-size:10pt;
}
.message{
margin:20px auto 0px auto;
height:280px;
}
#read1,#read2{
display:block;
text-decoration:underline;
margin:auto;
text-align:right;
cursor:pointer;
cursor:hand;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var divs=document.getElementsByTagName('div'),
bh=280, // Base height of your divs
minheight=40, //This means 40% of the base height
read1=document.getElementById('read1'), //This is the id of your read1
read2=document.getElementById('read2'), //This is the id of your read1
expand='Read More';
collapse='Collapse';
for(var i=1;i<divs.length;i++)
{
divs[i].style.height=bh*(minheight/100)+'px';
divs[i].style.overflow='hidden';
}
read1.onclick=function()
{
if(this.firstChild.nodeValue==expand)
{
divs[1].style.height='100%';
// this.firstChild.nodeValue=''; // This is for DOM, you could use this one if you wish
this.innerHTML='Collapse';
}
else
{
divs[1].style.height=bh*(minheight/100)+'px';
// this.firstChild.nodeValue=''; // This is for DOM, you could use this one if you wish
this.innerHTML='Read More';
}
}
read2.onclick=function()
{
if(this.firstChild.nodeValue==expand)
{
divs[2].style.height='100%';
// this.firstChild.nodeValue=''; // This is for DOM, you could use this one if you wish
this.innerHTML='Collapse';
}
else
{
divs[2].style.height=bh*(minheight/100)+'px';
// this.firstChild.nodeValue=''; // This is for DOM, you could use this one if you wish
this.innerHTML='Read More';
}
}
}
</script>
</head>
<body>
<div id="wrap">
<div class="message">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
Quisque nec enim. Nullam elementum. Quisque rhoncus. Ut cursus, pede sit amet facilisis pretium,
est erat congue tortor, eget tincidunt metus augue in mauris. Sed id pede. Nam varius faucibus massa.
In orci. Suspendisse metus nunc, egestas non, porta a, fermentum interdum, mi. Nulla vel tellus nec
erat consectetuer molestie. Vivamus turpis erat, rhoncus sed, ornare vel, volutpat sagittis, nibh.
Nulla libero. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut id mauris eget felis laoreet
semper. Maecenas venenatis erat et orci. Aenean interdum ligula sed nisi. Nulla vel lectus eu dolor porttitor
tempus. Proin at nisi fringilla pede feugiat luctus. Aenean id risus. Vestibulum a erat ac ipsum fringilla
feugiat. Cras mauris.
</div>
<span id="read1">Read More</span>
<div class="message">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
Quisque nec enim. Nullam elementum. Quisque rhoncus. Ut cursus, pede sit amet facilisis pretium,
est erat congue tortor, eget tincidunt metus augue in mauris. Sed id pede. Nam varius faucibus massa.
In orci. Suspendisse metus nunc, egestas non, porta a, fermentum interdum, mi. Nulla vel tellus nec
erat consectetuer molestie. Vivamus turpis erat, rhoncus sed, ornare vel, volutpat sagittis, nibh.
Nulla libero. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut id mauris eget felis laoreet
semper. Maecenas venenatis erat et orci. Aenean interdum ligula sed nisi. Nulla vel lectus eu dolor porttitor
tempus. Proin at nisi fringilla pede feugiat luctus. Aenean id risus. Vestibulum a erat ac ipsum fringilla
feugiat. Cras mauris.
</div>
<span id="read2">Read More</span>
</div>
</body>
</html>