Using tables with Accordion widget

Using tables with Accordion widget

Hi there,

I'm fairly new to jQuery and jQuery UI, and I would like to implement the accordion widget on one of my sites.

I have used the example published on jqueryui.com and it works fantastically. However, I would like to use a table within each section of the accordion, and if I try, the accordion breaks.

Below is an example of my code:

  1. <head>
  2. <link type="text/css" href="css/custom-theme/jquery-ui-1.8.custom.css" rel="stylesheet" />   
  3. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  4. <script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
  5. <script type="text/javascript">
  6.     $(function(){
  7.         $("#accordion").accordion({ header: "h3", autoHeight: false, navigation: true });
  8.     });
  9. </script>
  10. <style type="text/css">
  11.     .demoHeaders { margin-top: 2em; }
  12.     #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
  13.     #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
  14.     ul#icons {margin: 0; padding: 0;}
  15.     ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
  16.     ul#icons span.ui-icon {float: left; margin: 0 4px;}
  17. </style>
  18. </head>
  19. <body>
  20. <div id="accordion">
  21.     <div>
  22.         <h3><a href=\"#\">Section 1 Title</a></h3>
  23.         <div>
  24.             <table>
  25.                 <tr>
  26.                     <td>Col1</td>
  27.                     <td>Col2</td>
  28.                     <td>Col3</td>
  29.                 </tr>
  30.             </table>
  31.          </div>
  32.     </div>
  33.    <div>
  34.         <h3><a href=\"#\">Section 2 Title</a></h3>
  35.         <div>
  36.             <table>
  37.                 <tr>
  38.                     <td>Col1</td>
  39.                     <td>Col2</td>
  40.                     <td>Col3</td>
  41.                 </tr>
  42.             </table>
  43.          </div>
  44.     </div>           
  45. </div>
  46. </body>
Am I able to use jQuery UI to have tables within this animated accordion?

Your assistance is greatly appreciated.

Regards,
Chris.