Accordion adjusting height of the panels in jquery 1.10.4

Question

I know this is well-documented question, but nevertheless - I am stuck.

I am using latest jQuery (1.10.4) and running accordion. The height of panel area now looks like to be set to "auto" because it takes the largest content and applies it to the rest of the panels. According to the API Documentation I have altered the following JS line (heightStyle from "auto" to "content"):

$.widget( "ui.accordion", {version: "1.10.4", options: {
    active: 0,
    animate: {},
    collapsible: true,
    event: "click",
    header: "> li > :first-child,> :not(li):even",
    heightStyle: "content",                         <!-- This line is changed -->
    icons: {activeHeader: "ui-icon-triangle-1-s",
        header: "ui-icon-triangle-1-e"},

This did not help. I also tried this (also failed):

var heightStyle = $( ".questions" ).accordion("heightStyle");
$( ".questions" ).accordion("heightStyle");

And finally I tried this, which surpiringly enough, did not work either:

$( "#fullpageaccordion .questions" ).accordion({heightStyle: "content"});

(.questions) - is the name for accordion element.

Any ideas? Thanks!

UPDATE 2 - relevant section of html code (Accordion within Tabs):

<div class="questions">
<div id="Q401">
<table id="QTable">
<tr>
  <td><div id="QNumber">4.1</div></td>
  <td><div id="QText">Is the vessel provided with adequate operator’s navigation instructions and procedures?</div>
</td>
</tr>
</table>
</div>
<div>
<table id="RTable">
<tr>
<td>
<div id="Guidance">
  <p>content</p>
<ul>
      <li></li>
      <li></li>
    </ul>   
<p></p>
 </div>
 </td>

<td>
<div id="Response" class="Response">
  <label><input type="radio" name="Radio401" value="Y" id="Radio_401Y" onchange='radioChange(this, "401")'>Yes</label>
            <label><input type="radio" name="Radio401" value="N" id="Radio_401N" onChange='radioChange(this, "401")'>No</label>
 </div>
 <div id="responseDetails">
    <div id="Observation">
     <label for="observation">Observation:</label>
        <textarea name="observation" id="Obs401" rows="6" disabled style="width: 530px;" placeholder="Enter text of observation here ..."></textarea>
    </div>
    <div id="DueDate">
       <label for="DueDate">Due date:<br></label>
       <input name="DueDate" class="DueDate" type="date" id="DueDate401"/>
    </div>
    <div id="actions">
       <label for="actions">Actions required to correct and/or prevent this observation:</label>
       <textarea name="actions" id="pa401" rows="6" style="width: 530px;"></textarea>
     </div>
  </div>
 </td>
</tr>
</table>
</div>
</div> //closing class

Other questions are the same by structure

Answer 1

Ok, I've messed around quite a bit, and here is a Fiddle Demo

I messed around with your code a little bit, I hope you don't mind :)

Basically I removed the tables and such, so it would fit the structure of the accordion better. Basically what you need is blocks of questions. Each block has 2 children, an h3 element (could be another if you want) and a div element.

I gave those blocks a class, and initialized them as such:

$( ".questionBlock" ).accordion({collapsible: true, active: false });

This way they start collapsed. Expand each and you can see they each have their own height based on their own content.

Let me know if it's not clear yet.

EDIT: Ok I've adjusted it better. This is the initialization:

$( "#questions" ).accordion({collapsible: true, active: false, autoHeight: false});

Also, there is no need for the code blocks questionBlock anymore. All you need is the questions as id, and then follow up with the <h3> & div combos. I updated the fiddler demo.

Update: Add heightStyle: "content" to your initialization so you'll have:

$( ".questions").accordion({collapsible: true, active: false, autoHeight: false, heightStyle: "content"});

And your fiddle is good to go.