Question

I have a simple accordion setup, with just two sections. The top, first section collapsed by default with the bottom second one, expanded by default.

I’ve ran into a problem, the top first section, when expanded has a style set somewhere that’s creating a height of ‘3791.8px;‘ creating this huge vertical white space (my content is only 1000px). I’m not sure where it’s coming from as I’ve searched the default css that was attached to the script and found nothing related.
(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css” rel=”stylesheet” type=”text/css”/)

I’ve tried defining the height in that specific div, the accordion div, inline, externally – toggling overflow, and every other which way to try to close this white space/override that style from where it’s coming from.

What can I do?

This is pretty much all I have implemented (just with my text content);

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <script>
  $(document).ready(function() {
    $( "#accordion" ).accordion({ active: 1 });

  });

  </script>

<div id="accordion">

<h3><a href="#">Section 1</a></h3>

 <p> Text content </p>

<h3><a href="#">Section 2</a></h3>

<p> Text content </p>

</div>

Link of problem: http://tinyurl.com/7xn33hb

Answer 1

Try setting autoHeight: false

$(document).ready(function() {
    $( "#accordion" ).accordion({ 
        active: 1,
        autoHeight: false
     });
});