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!

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