Question about the following webpage

Get Started
1

Hi,
I’m not that experienced in html and css and was wondering if someone could tell me how to make the page expand vertically when you click on the “Full Details,” buttons on the following webpage if it’s not too much trouble. I would like to use this idea they used :

2

they might have done it with something along these lines

 
<!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>
3

I would say the easiest way to do it is to use jQuery. You can easily use the toggle() functions to animate those kind of effects.

4

Do you know what it’s called using jquery so I could download it from the web?

Thanks a lot for your help.

5

This is often called an ‘accordion’. There are lots of nice scripts out there like this one:

http://onlinetools.org/tools/yuidomcollapse/

or, if you want a jquery one:

Or check out a nice example by a sitepoint member:

http://battletech.hopto.org/html_tutorials/accordion/
Demo: http://battletech.hopto.org/html_tutorials/accordion/template.html

from this thread:
http://www.sitepoint.com/forums/showthread.php?p=4717782#post4717782