title: Adjusting height of the panels in jquery Accordion widget
body: <p>I am using jquery accordion widget. I want the height of the panles in the widget to get adjusted according to their contents. For that I tried using "setter" method of options we have and also while instantiating  I tried setting the value of 'heightStyle'. It even works for one of the accordion widget instance but for the other one I have added, it simply doesn't work.  </p>
  
  <p>Is there any other way to adjust the height rather than overriding the accordion css?<br>
  In My case, for the accordion inside '<strong>fullpageaccordion</strong>' div, <strong>its taking the same height for all the elements per the first element in the accordion though I have given the heightStyle as content while instantiating</strong>.<br>
  Please find my code below:  </p>
  
  <pre><code>&lt;head&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /&gt;
      &lt;!--&lt;link rel="stylesheet" href="./css/jquery-ui.css"/&gt;--&gt;
      &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;style type="text/css"&gt;
          #container{
              width: 99%;
              border: 1px solid #ff00ff;
              padding: 5px 5px 5px 5px;
              min-height: 750px;
          }
  
          #accordiondiv{
              position: relative;
              width: 30%;
              border: 1px solid #dddddd;
              float: left;
          }
          .collapsibledivs{
              position: relative;
              width:69%;
              border: 1px solid green;
              min-height: 70px;
              float: left;
              padding-right: 0.7%;
          }
          .collapsibleheaders{
              background: #efefef;
              width: 100%;
              float:left;
              padding-left: 10px;
          }
          #fullpageaccordion{
              width: 69%;
              border: 1px solid blue;
              float:left;
          }
          #fullpageaccordion .accordion h2{
              color: rgb(145,186,222);
              background:rgb(242,242,242);
          }
  
          .deletebtn{
              float: right;
              width: 30px;
              height: 30px;
              border-left: 1px solid #dddddd;
              cursor: pointer;
              background-image: url(./images/minus.png);
              background-repeat: no-repeat;
              background-size: 100%;
              background-position: center;
          }
          .unorderedlist{
              list-style-type: none;
          }
          .breadcrumdiv{
              background: #ffffff;
              width: 49%;
              min-height: 40px;
              float:left;
              border: 1px solid pink;
          }
          .fontformat{
              background: #dddddd;
              width: 45%;
              min-height: 40px;
              float:left;
              border: 1px solid pink;
          }
          .breadcrumwrapper{
              position: relative;
              width:69%;
              border: 1px solid green;
              min-height: 0px;
              float: left;
              padding-right: 0.7%;
          }
          .backbtn{
              height: 40px;
              width: 40px;
              background: url(./images/tool_arrow_right.png);
              float: left;
              cursor: pointer;
              background-repeat: no-repeat;
              background-size: 60%;
              background-position: 65% 60%;
              border-right: 1px solid #dddddd;
          }
          .nextbtn{
              height: 40px;
              width: 40px;
              background: url(./images/tool_arrow_left.png);
              float: left;
              cursor: pointer;
              background-repeat: no-repeat;
              background-size: 60%;
              background-position: 40% 60%;
              border-right: 1px solid #dddddd;
          }
          .ui-accordion .ui-accordion-content{
              /*height: 100px !important;
              overflow-y:scroll !important;*/
          }
  
      &lt;/style&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function(){
              $( "#fullpageaccordion .accordion" ).accordion({autoHeight: false});
              $(".breadcrumwrapper button[name=back]").addClass("backbtn");
              $(".accordion").accordion({
                  heightStyle: "content"
              });
              $("#fullpageaccordion .accordion").accordion({
                  heightStyle: "content"
              });
              $(".subaccordion").accordion({
                  heightStyle: "content"
              });
              $(".deletebtn").click(function(){
                  console.log('on delete click');
                  if($("#collapsibeldivs").css("display") == "block"){
                      $(this).parents(".collapsibledivs").animate({height:"0px"});
                  }
                  else{
                      $($(this).parents(".collapsibledivs")).toggle('show');
                  }
              });
              $(".breadcrumwrapper [name=back]").click(function(){
                  var classApplied = $(this).attr('class');
                  console.log('class applied:'+classApplied);
                  if(classApplied == "backbtn"){
                      console.log('back btn clicked....');
                      $(".breadcrumdiv").animate({width:"95%"});
                      $(".fontformat").animate({width:"0%"});
                      $($(".breadcrumwrapper button[name=back]")[0]).removeClass("backbtn");
                      $($(".breadcrumwrapper button[name=back]")[0]).addClass("nextbtn");
                  }
                  else{
                      $(".breadcrumdiv").animate({width:"49%"});
                      $(".fontformat").animate({width:"45%"});
                      $($(".breadcrumwrapper button[name=back]")[0]).removeClass("nextbtn");
                      $($(".breadcrumwrapper button[name=back]")[0]).addClass("backbtn");
                  }
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div id="accordiondiv"&gt;
              &lt;div class="accordion"&gt;
                  &lt;h3&gt;My Pages&lt;/h3&gt;
                  &lt;div&gt;
                      &lt;div class="subaccordion"&gt;
                          &lt;h4&gt;Page 1&lt;/h4&gt;
                          &lt;div&gt;   
                              &lt;ul class="unorderedlist"&gt;
                                  &lt;li&gt; page 1.1 &lt;/li&gt;
                                  &lt;li&gt; page 1.2 &lt;/li&gt;
                                  &lt;li&gt; page 1.3 &lt;/li&gt;
                                  &lt;li&gt; page 1.4 &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                          &lt;h4&gt;Page 2&lt;/h4&gt;
                          &lt;div&gt;   
                              &lt;ul class="unorderedlist"&gt;
                                  &lt;li&gt; page 2.1 &lt;/li&gt;
                                  &lt;li&gt; page 2.2 &lt;/li&gt;
                                  &lt;li&gt; page 2.3 &lt;/li&gt;
                                  &lt;li&gt; page 2.4 &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                          &lt;h4&gt;Page 3&lt;/h4&gt;
                          &lt;div&gt;   
                              &lt;ul class="unorderedlist"&gt;
                                  &lt;li&gt; page 3.1 &lt;/li&gt;
                                  &lt;li&gt; page 3.2 &lt;/li&gt;
                                  &lt;li&gt; page 3.3 &lt;/li&gt;
                                  &lt;li&gt; page 3.4 &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;h3&gt;My Drafts&lt;/h3&gt;
                  &lt;div&gt;
                      &lt;ul class="unorderedlist"&gt;
                          &lt;li&gt; page 1 &lt;/li&gt;
                          &lt;li&gt; page 2 &lt;/li&gt;
                          &lt;li&gt; page 3 &lt;/li&gt;
                          &lt;li&gt; page 4 &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;h3&gt;My Public Pages&lt;/h3&gt;
                  &lt;div&gt;
                      &lt;ul class="unorderedlist"&gt;
                          &lt;li&gt; page 1 &lt;/li&gt;
                          &lt;li&gt; page 2 &lt;/li&gt;
                          &lt;li&gt; page 3 &lt;/li&gt;
                          &lt;li&gt; page 4 &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="breadcrumwrapper"&gt;
              &lt;div class="breadcrumdiv"&gt;
  
              &lt;/div&gt;
              &lt;div class="fontformat"&gt;
  
              &lt;/div&gt;
              &lt;button name="back"/&gt;
          &lt;/div&gt;
          &lt;div class="collapsibledivs"&gt;
              &lt;div class="collapsibleheaders"&gt;
                  LANE 1
                  &lt;button class="deletebtn"/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="fullpageaccordion"&gt;
              &lt;div class="accordion"&gt;
                  &lt;h2&gt;LORIUM IMPSUM HEADING&lt;/h2&gt;
                  &lt;div&gt;
                      &lt;ul style="list-style-type:none;"&gt;
                          &lt;li&gt;
                              &lt;label style="width:20%;"&gt;Item1:&lt;/label&gt;
                              &lt;input type="text" style="width:25%;margin-left:4%;"&gt;
                              &lt;input type="text" style="width:25%;margin-left:4%;"&gt;
                              &lt;input type="text" style="width:25%;margin-left:4%;"&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;div style="min-height:20px;background:transperant;"&gt;&lt;/div&gt;&lt;/li&gt;
                          &lt;li&gt;
                              &lt;label style="width:20%;"&gt;Item2:&lt;/label&gt;
                              &lt;input type="text" style="width:25%;;margin-left:4%;"&gt;
                              &lt;input type="text" style="width:25%;;margin-left:4%;"&gt;
                              &lt;input type="text" style="width:25%;;margin-left:4%;"&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;div style="min-height:20px;background:transperant;"&gt;&lt;/div&gt;&lt;/li&gt;
                          &lt;li&gt;
                              &lt;label style="width:20%;"&gt;Item3:&lt;/label&gt;
                              &lt;input type="text" style="width:25%;;margin-left:4%;"&gt;
                              &lt;input type="text" style="width:25%;;margin-left:4%;"&gt;
                              &lt;input type="text" style="width:25%;;margin-left:4%;"&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;h2&gt;SIDEBAR&lt;/h2&gt;
                  &lt;div&gt;
  
                  &lt;/div&gt;
                  &lt;h2&gt;LANE 1&lt;/h2&gt;
                  &lt;div&gt;
  
                  &lt;/div&gt;
                  &lt;h2&gt;LANE 2&lt;/h2&gt;
                  &lt;div&gt;
  
                  &lt;/div&gt;
                  &lt;h2&gt;LANE 3&lt;/h2&gt;
                  &lt;div&gt;
  
                  &lt;/div&gt;
                  &lt;h2&gt;FOOTER&lt;/h2&gt;
                  &lt;div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>