Noob jquery .hide and .click question

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/"&gt;PHP&lt;/a&gt;&lt;/li&gt;
   <li><a href="http://www.ruby-lang.org/en/"&gt;Ruby&lt;/a&gt;&lt;/li&gt;
  </ul>
 </li>
 <li>
  <a href="#">Test #2</a>
   <ul>
    <li><a href="http://www.php.net/"&gt;PHP&lt;/a&gt;&lt;/li&gt;
    <li><a href="http://www.ruby-lang.org/en/"&gt;Ruby&lt;/a&gt;&lt;/li&gt;
  </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/"&gt;Link-1&lt;/a&gt;&lt;/td&gt;
    <td><a href="http://www.link2.com/"&gt;Link-2&lt;/a&gt;&lt;/td&gt;
    <td><a href="http://www.link3.com/"&gt;Link-3&lt;/a&gt;&lt;/td&gt;
   </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!

Answer 1

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');    
  });
});​