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

two collapsible tables, one toggle function, much frustration

P: 1
Hello. I'm painfully new to this and am having trouble figuring out what I'm doing wrong... I have two small tables in a simple html file. I want each table to have the ability to collapse/expand when the user clicks selected text. I've attempted the javascript toggle function. I believe the problem is somewhere in how I'm calling the function, but I dont know exact what...

Any help would be much appreciated! Thanks!


[HTML]<html>
<head>
<script>
function toggle()
{
if(document.getElementById().style.display=='none' )
{document.getElementById().style.display = '';
}
else
{document.getElementById('ms').style.display = 'none';
}
}
</script>
</head>

<span onClick="toggle("ms");">-/+ </span>
<strong><font color="#0000ff">Product</font></strong>
<table id="ms" cellspacing="0" cellpadding="10" border="0">

<tr valign="top">
<td></td>
<td width="250">ONE</td>
<td>A</td>
</tr>

<tr valign="top">
<td></td>
<td>TWO</td>
<td>B</td>
</tr>

<tr valign="top">
<td></td>
<td>THREE</td>
<td>C</td>
</tr>

</table><br>

<span onClick="toggle("cat");">-/+ </span>
<strong><font color="#0000ff">Category</font></strong>
<table id="cat" cellspacing="0" cellpadding="10" border="0">

<tr valign="top">
<td></td>
<td width="250">FOUR</td>
<td>D</td>
</tr>

<tr valign="top">
<td></td>
<td>FIVE</td>
<td>E</td>
</tr>

<tr valign="top">
<td></td>
<td>SIX</td>
<td>F</td>
</tr>

</table><br>
</body>
</html>[/HTML]
Sep 22 '06 #1
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
Four problems:
  1. When calling toggle in the span onclick, you're using double quotes within double quotes.
  2. The toggle function requires an argument to capture the passed id string
  3. document.getElementById needs an id to get an element.
  4. Use the passed id for the else part otherwise it will collapse the wrong table
Here's the modified code:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script>
  4. function toggle(id)
  5. {
  6. if(document.getElementById(id).style.display=='none' )
  7. {document.getElementById(id).style.display = '';
  8. }
  9. else
  10. {document.getElementById(id).style.display = 'none';
  11. }
  12. }
  13. </script>
  14. </head>
  15.  
  16. <span onclick="toggle('ms');">-/+ </span>
  17. <strong><font color="#0000ff">Product</font></strong>
  18. <table id="ms" cellspacing="0" cellpadding="10" border="0">
  19.  
  20. <tr valign="top">
  21. <td></td>
  22. <td width="250">ONE</td>
  23. <td>A</td>
  24. </tr>
  25.  
  26. <tr valign="top">
  27. <td></td>
  28. <td>TWO</td>
  29. <td>B</td>
  30. </tr>
  31.  
  32. <tr valign="top">
  33. <td></td>
  34. <td>THREE</td>
  35. <td>C</td>
  36. </tr>
  37.  
  38. </table><br>
  39.  
  40. <span onclick="toggle('cat');">-/+ </span>
  41. <strong><font color="#0000ff">Category</font></strong>
  42. <table id="cat" cellspacing="0" cellpadding="10" border="0">
  43.  
  44. <tr valign="top">
  45. <td></td>
  46. <td width="250">FOUR</td>
  47. <td>D</td>
  48. </tr>
  49.  
  50. <tr valign="top">
  51. <td></td>
  52. <td>FIVE</td>
  53. <td>E</td>
  54. </tr>
  55.  
  56. <tr valign="top">
  57. <td></td>
  58. <td>SIX</td>
  59. <td>F</td>
  60. </tr>
  61.  
  62. </table><br>
  63. </body>
  64. </html>
May 17 '08 #2

Post your reply

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