Thanks thats exactly what i want to try and do but i seem to be having problems. I cant get more that the 2 thats are present there, would it be possible for you to edit and for 26 and i can work from there?
thanks
Simply, add divs as u need. "Note that the posted link deals with divs ( not tables ) ".
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls dot com | Show me some more</title>
<style type="text/css">
/* always visible */
#outer .holder {padding:1em; border:1px solid #ddd; margin:0 20px 10px 0;}
#outer .holder p {padding:5px 0 0 0; margin:0;}
#outer .holder p.bold {font-weight:bold;}
#outer .holder h2 {margin:0; padding:0;}
/* unclicked style div.more */
#outer div.more i {float:right; margin-right:-10px 10px 0 0; cursor:pointer; color:#c00; font-weight:bold;}
#outer div.more i.hide {display:none;}
#outer div.more p {display:none;}
#outer div.more img {display:none;}
/* clicked style div.click */
#outer div.click i.show {display:none;}
#outer div.click i.hide {display:block;}
#outer div.click p {display:block;}
#outer div.click img {display:block; float:left; padding-right:10px;}
</style>
<script language="javascript" type="text/javascript">
clickMenu = function(menu,element,cname) {
var getEls = document.getElementById(menu).getElementsByTagName (element);
for (var i=0; i<getEls.length; i++) {
getEls[i].onclick=function() {
if ((this.className.indexOf(cname))!=-1)
{
if ((this.className.indexOf('click'))!=-1) {
this.className=this.className.replace("click", "");;
}
else {
this.className+=" click";
}
}
}
}
}
</script>
</head>
<body onload="clickMenu('outer','div','more')">
<div id="outer">
<div class="holder">
<p>A</p>
<div class="more">
<i class="show">more »</i>
<i class="hide">« less</i>
<br />
<p>apple</p>
</div> <!-- end of more -->
</div> <!-- end of holder -->
<div class="holder">
<p>B</p>
<div class="more">
<i class="show">more »</i>
<i class="hide">« less</i>
<br />
<p>Ball</p>
</div> <!-- end of more -->
</div> <!-- end of holder -->
<div class="holder">
<p>C</p>
<div class="more">
<i class="show">more »</i>
<i class="hide">« less</i>
<br />
<p>Candy</p>
</div> <!-- end of more -->
</div> <!-- end of holder -->
</div> <!-- end of outer -->
<p>© 2007 stunicholls.com</p>
</body>
</html>[/HTML]
If you gonna use div for each alphabet, u will end up with 26 divs at least each page, which isn't a solution !!!
If u want to use tables,
here is a table example. 
3
