I am facing an issue using a table with JQuery UI Accordion where both the header and contents should have 3 columns of fixed width. Strangely, the first column in the contents is not following the CSS rules while the header appears to be fine. Here is a link to my JSFiddle for reference: http://jsfiddle.net/qm12h9tL/
Below is the code snippet:
<script>
$(document).ready(function() {
$('#topics').accordion({
collapsible:true,
header:'.topic',
content:'.lessons'
});
});
</script>
... (rest of the code)
Edit1: I tried rearranging the HTML structure as shown below but it did not work:
<table id="topics">
<tr class="topic">
... (content here)
</tr>
<tr class='lessons'>
... (content here)
</tr>
</table>
Edit 2: Surprisingly, adding more lessons to a topic seems to create complications! Check out this updated fiddle with additional lessons added: http://jsfiddle.net/qm12h9tL/11/. Updated code snippet can be seen below:
<table id="topics">
... (updated content here)
</table>