jQuery with tables?

jQuery with tables?

Hello Folks,
              I am new to jQuery. I have a sample code as given below. It works fine, except I need to display it as a table with tr and td tags and the animation should be like toggleup. So basically, when I mouse over the tr elements, the corresponding td elements should pop up for the particular tr.

  1. <HTML>
  2. <HEAD>
  3. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  4. <TITLE>Test</TITLE>
  5. <STYLE>
  6. body, input{
  7.  font-family: Calibri, Arial;
  8. }
  9. #accordion {
  10.  list-style: none;
  11.  padding: 0 0 0 0;
  12.  width: 170px;
  13. }
  14. #accordion li{
  15.  display: block;
  16.  background-color: #FF9927;
  17.  font-weight: bold;
  18.  margin: 1px;
  19.  cursor: pointer;
  20.  padding: 5 5 5 7px;
  21.  list-style: circle;
  22.  -moz-border-radius: 10px;
  23.  -webkit-border-radius: 10px;
  24.  border-radius: 10px;
  25. }
  26. #accordion ul {
  27.  list-style: none;
  28.  padding: 0 0 0 0;
  29.  display: none;
  30. }
  31. #accordion ul li{
  32.  font-weight: normal;
  33.  cursor: auto;
  34.  background-color: #fff;
  35.  padding: 0 0 0 7px;
  36. }
  37. #accordion a {
  38.  text-decoration: none;
  39. }
  40. #accordion a:hover {
  41.  text-decoration: underline;
  42. }
  43. </STYLE>
  44. </HEAD>
  45. <BODY>
  46. <ul id="accordion">
  47.  <li>What's New</li>
  48.  <ul>
  49.   <li><a href="#">Reman</a></li>
  50.   <li><a href="#">Core</a></li>
  51.  
  52.  </ul>
  53.  <li>Featured Links</li>
  54.  <ul>
  55.   <li><a href="#">Program</a></li>
  56.   <li><a href="#">Center</a></li>
  57.   <li><a href="#">Catalog</a></li>
  58.   <li><a href="#">Info</a></li>
  59.  </ul>
  60.  <li>Tuned</li>
  61.  <ul>
  62.   <li><a href="#">Tuned?</a></li>
  63.   <li><a href="#">Articles</a></li>
  64.   <li><a href="#">Archives</a></li>
  65.   <li><a href="#">Subscribe</a></li>
  66.  </ul>
  67.  <li>Ordering</li>
  68.  <ul>
  69.   <li><a href="">coming soon</a></li>
  70.  
  71.  </ul>
  72. </ul>
  73. </BODY>
  74. <SCRIPT>
  75. $("#accordion > li").mouseover(function(){
  76.  if(false == $(this).next().is(':visible')) {
  77.   $('#accordion > ul').slideUp(300);
  78.   $('#accordion > li').slideDown(100);
  79.  }
  80.  $(this).next().slideToggle(300);
  81. });
  82. //$('#accordion > ul:eq(0)').show();
  83. </SCRIPT>
  84. </HTML>