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






  1. JavaScript Tutorial
  2. jQuery
  3. UI Accordion
<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>








30.139.UI Accordion
30.139.1.Setting autoHeight: false allows to accordion panels to keep their native height.
30.139.2.jQuery UI Accordion - Collapse content
30.139.3.Customize the header icons
30.139.4.jQuery UI Accordion - Default functionality
30.139.5.jQuery UI Accordion - Fill space
30.139.6.Accordion Resizer
30.139.7.jQuery UI Accordion - Open on mouseover
30.139.8.This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size
30.139.9.Call accordion() function to make an accordion panel
30.139.10.Create option array and pass to create accordion panel
30.139.11.alwaysOpen:false, autoHeight:false
30.139.12.Set active panel for accordion
30.139.13.fillSpace: true
30.139.14.Destroy the accordion panel
30.139.15.Enable or disable accordion panel
30.139.16.Set active accordion panel
30.139.17.accordion panel open/close event
30.139.18.Use h4 as header
30.139.19.Use mouse over event to trigger
30.139.20.Set active panel by class name