By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,767 Members | 1,255 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,767 IT Pros & Developers. It's quick & easy.

expand table rows

P: 3
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
Feb 18 '08 #1
Share this Question
Share on Google+
6 Replies


nomad
Expert 100+
P: 664
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
Feb 19 '08 #2

P: 3
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
Feb 19 '08 #3

just a feeling
P: 87
Here is how to do it.
Good Luck,
Feb 19 '08 #4

P: 3
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
Feb 19 '08 #5

just a feeling
P: 87
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>&copy; 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.
Feb 20 '08 #6

just a feeling
P: 87
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.
Feb 20 '08 #7

Post your reply

Sign in to post your reply or Sign up for a free account.