Noob jquery .hide and .click question

I am a Jquery noob. I and am trying to create an accordion menu. I have been able to get the following js working with the following HTML code.

function initMenu() {
  $('#menu ul').hide();
  $('#menu li a').click(
    function() {
        $(this).next().slideToggle('normal');   
      }
    );
  }
$(document).ready(function() {initMenu();});

.

<li>                        
 <a href="#">Testing #1</a>
  <ul>
   <li><a href="http://www.php.net/">PHP</a></li>
   <li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>
  </ul>
 </li>
 <li>
  <a href="#">Test #2</a>
   <ul>
    <li><a href="http://www.php.net/">PHP</a></li>
    <li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>
  </ul>
</li>

I would like to to use table for each li. I am not sure if this is the best way. So far I have this:

<ul>
 <li>
  <table border="1">
   <tr>
    <td><a href="http://www.link1.com/">Link-1</a></td>
    <td><a href="http://www.link2.com/">Link-2</a></td>
    <td><a开发者_开发技巧 href="http://www.link3.com/">Link-3</a></td>
   </tr>
  </table>
 </li>

Do I need to adjust my js to work in this scenario? With the tables, it still appears to work, but I suspect I will be generating a lot more tags (Data) than needed to accomplish this.

Any helping or input is appreciated, thanks!

What you have will work, you can test it here. One suggestion though, you can shorten this:

$(document).ready(function() {initMenu();});​

Down to:

$(initMenu);​

When passing a function to $() it attaches that function as a document.ready handler, and it'll execute when the page is good to go. You can test that here, or the anonymous function version like this:

$(function () {
  $('#menu ul').hide();
  $('#menu li a').click(function() {
    $(this).next().slideToggle('normal');    
  });
});​