expand table rows

**nomad** · Feb 19 '08, 01:03 AM

Originally posted by philmetz

Hi

Does anyone have a simple way to expand and collapse table rows. For example i will have 26 rows (one for each letter of alphabet) then i can say expand A and i will get a list of things there?

thanks

Do you mean you need help with pull down menus?

nomad

**philmetz** · Feb 19 '08, 01:09 AM

no like a expanding menu

>A
--------->apple
>B

etc etc

but where apple is i want to be able to have like a couple of paragraphs

**just a feeling** · Feb 19 '08, 10:35 AM

Here is how to do it.
Good Luck,

**philmetz** · Feb 19 '08, 10:18 PM

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

**just a feeling** · Feb 20 '08, 07:07 PM

Originally posted by philmetz

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="javas cript" type="text/javascript">
clickMenu = function(menu,e lement,cname) {
var getEls = document.getEle mentById(menu). getElementsByTa gName (element);

for (var i=0; i<getEls.length ; i++) {
getEls[i].onclick=functi on() {
if ((this.classNam e.indexOf(cname ))!=-1)
{
if ((this.classNam e.indexOf('clic k'))!=-1) {
this.className= this.className. replace("click" , "");;
}
else {
this.className+ =" click";
}
}
}
}
}
</script>

</head>

<body onload="clickMe nu('outer','div ','more')">

<div id="outer">

<div class="holder">
<p>A</p>
<div class="more">
<i class="show">mo re »</i>
<i class="hide">« less</i>

<br />
<p>apple</p>

</div> 
</div> 

<div class="holder">
<p>B</p>
<div class="more">
<i class="show">mo re »</i>
<i class="hide">« less</i>
<br />
<p>Ball</p>

</div> 
</div> 

<div class="holder">
<p>C</p>
<div class="more">
<i class="show">mo re »</i>
<i class="hide">« less</i>
<br />
<p>Candy</p>

</div> 
</div> 

</div> 
<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.

**just a feeling** · Feb 20 '08, 07:09 PM

If you are still facing problems, I recommend that u ask on javascript board cuz this questions is a JS one and experts there can help u.

expand table rows

expand table rows

Comment

Comment

Comment

Comment

Comment

Comment