Javascript..Show/Hide code

  • haskell
  • Novice
  • Novice
  • haskell
  • Posts: 28

Post 3+ Months Ago

Hi, I need help creating the code for a vertical menu using javascript Show/Hide...I'm having problems creating the sub menu with more than 1 link for each of the Main Links. Any help would be great!....here is some code....

Code: [ Select ]
<script type="text/javascript">
function change(id){
    ID = document.getElementById(id);
    
    if(ID.style.display == "")
         ID.style.display = "none";
    else
         ID.style.display = "";
     }
</script>




<table width="220">
<tr>
    <td title="Show/Hide" onclick="change(1)" style="cursor: hand" onMouseOver="style.backgroundColor='#cecece';" onMouseOut="style.backgroundColor='#F3F3F3'" class="tbl" width="208" height="25">» <a onclick="change(1)" href="#">Home</a></td>
</tr>

<!-- Sub menu 1 -->
<tr style="display: none" id="1">
    <td class="tbl" width="208" height="25" style="background-color: #FFFFFF">
    Sub 1</td>
</tr>

<tr>
    <td title="Show/Hide" onclick="change(2)" style="cursor: hand" onMouseOver="style.backgroundColor='#cecece';" onMouseOut="style.backgroundColor='#F3F3F3'" class="tbl" width="208" height="25">» <a onclick="change(2)" href="#">
    Link 2</a></td>
</tr>

<!-- Sub menu 2 -->
<tr style="display: none" id="2">
    <td class="tbl" width="208" height="25" style="background-color: #FFFFFF">
    Sub 2</td>
</tr>
<tr>
<td title="Show/Hide" onclick="change(3)" style="cursor: hand" onMouseOver="style.backgroundColor='#5b9c24';" onMouseOut="style.backgroundColor='#ffffff'" class="tbl" width="208" height="25">»
<a href="#">Link</a><a onclick="change(3)" href="#">

</a><a href="#">3</a></td>
</tr>
<!-- Sub menu 3 -->
<tr style="display: none" id="3">
    <td class="tbl" width="208" height="25" onMouseOver="javascript&#058;this.style.color='5b9c24'" onMouseOut="javascript&#058;this.style.color='000000'">
> Benefits</td>
  1. <script type="text/javascript">
  2. function change(id){
  3.     ID = document.getElementById(id);
  4.     
  5.     if(ID.style.display == "")
  6.          ID.style.display = "none";
  7.     else
  8.          ID.style.display = "";
  9.      }
  10. </script>
  11. <table width="220">
  12. <tr>
  13.     <td title="Show/Hide" onclick="change(1)" style="cursor: hand" onMouseOver="style.backgroundColor='#cecece';" onMouseOut="style.backgroundColor='#F3F3F3'" class="tbl" width="208" height="25">» <a onclick="change(1)" href="#">Home</a></td>
  14. </tr>
  15. <!-- Sub menu 1 -->
  16. <tr style="display: none" id="1">
  17.     <td class="tbl" width="208" height="25" style="background-color: #FFFFFF">
  18.     Sub 1</td>
  19. </tr>
  20. <tr>
  21.     <td title="Show/Hide" onclick="change(2)" style="cursor: hand" onMouseOver="style.backgroundColor='#cecece';" onMouseOut="style.backgroundColor='#F3F3F3'" class="tbl" width="208" height="25">» <a onclick="change(2)" href="#">
  22.     Link 2</a></td>
  23. </tr>
  24. <!-- Sub menu 2 -->
  25. <tr style="display: none" id="2">
  26.     <td class="tbl" width="208" height="25" style="background-color: #FFFFFF">
  27.     Sub 2</td>
  28. </tr>
  29. <tr>
  30. <td title="Show/Hide" onclick="change(3)" style="cursor: hand" onMouseOver="style.backgroundColor='#5b9c24';" onMouseOut="style.backgroundColor='#ffffff'" class="tbl" width="208" height="25">»
  31. <a href="#">Link</a><a onclick="change(3)" href="#">
  32. </a><a href="#">3</a></td>
  33. </tr>
  34. <!-- Sub menu 3 -->
  35. <tr style="display: none" id="3">
  36.     <td class="tbl" width="208" height="25" onMouseOver="javascript&#058;this.style.color='5b9c24'" onMouseOut="javascript&#058;this.style.color='000000'">
  37. > Benefits</td>
Moderator Remark: Added [code] tags
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

Post Information

  • Total Posts in this topic: 1 post
  • Users browsing this forum: No registered users and 63 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.