Setting autoHeight: false allows to accordion panels to keep their native height.

  
<html>
<head>
  <title>jQuery UI Accordion - No Auto Height</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.accordion.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
  $(function() {
    $("#accordion").accordion({
      autoHeight: false
    });
  });
  </script>
</head>
<body>
<div class="demo">
<div id="accordion">
  <h3><a href="">Section 1</a></h3>
  <div>
    <p>A</p>
  </div>
  <h3><a href="#">Section 2</a></h3>
  <div>
    <p>B</p>
  </div>
  <h3><a href="#">Section 3</a></h3>
  <div>
    <p>C</p>
  </div>
</div>
</div>

</div>
</body>
</html>

Related examples in the same category

1.	jQuery UI Accordion - Collapse content
2.	Customize the header icons
3.	jQuery UI Accordion - Default functionality
4.	jQuery UI Accordion - Fill space
5.	Accordion Resizer
6.	jQuery UI Accordion - Open on mouseover
7.	This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size
8.	Call accordion() function to make an accordion panel
9.	Create option array and pass to create accordion panel
10.	alwaysOpen:false, autoHeight:false
11.	Set active panel for accordion
12.	fillSpace: true
13.	Destroy the accordion panel
14.	Enable or disable accordion panel
15.	Set active accordion panel
16.	accordion panel open/close event
17.	Use h4 as header
18.	Use mouse over event to trigger
19.	Set active panel by class name

Setting autoHeight: false allows to accordion panels to keep their native height. : UI Accordion « jQuery « JavaScript DHTML

Related examples in the same category