How can you adjust the height of a jQuery UI accordion?

Question

In my UI I have an accordion setup like this:

    
Section 1
    
...content...

    //          


        
                      

              相关标签:
       
      

Answer 1

Setting the DIV's height will do the trick.

$(document).ready(function() {

    $("#accordion").show().accordion({
        autoHeight: false
    });

    $("#accordion div").css({ 'height': 'auto' });
});      

Answer 2

Use heightStyle option to control the height of the accordion and each panel.

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

Possible values:

1. "auto": All panels will be set to the height of the tallest panel.
2. "fill": Expand to the available height based on the accordion's parent height.
3. "content": Each panel will be only as tall as its content.

Answer 3

Just call the accordions .resize() method, this will recalculate its size. http://docs.jquery.com/UI/Accordion#method-resize

Answer 4

I recently set up an accordion that retrieves content via ajax when a tab is activated and ran into the same problem. I tried using some of the suggestions posted here, but they never quite grew the panel correctly until I set the heightStyle to content.

$("#myaccordion").accordion({
  heightStyle: "content",
  activate: function(event ui) {
    //use ajax to retrieve content here.
  }
});

I'm using jQuery-UI version 1.10.4.

Answer 5

autoHeight was deprecated in 1.9, and removed in 1.10.

Use:

$('#id').accordion({heightStyle: 'content'});

to auto size your inner div.

UPDATE:

I see that this is still quite an active post, so I decided to make sure my answer is still valid. It looks like this may no longer work in jQuery UI 1.11. It notes that the [content] property has been deprecated, and to use [panel] instead. Making the code snippet now look something more like this:

$('#id').accordion({heightStyle: 'panel'});

I HAVE NOT YET TESTED THIS, JUST FOUND, AND WILL RETURN AND REMOVE THIS COMMENT WHEN I HAVE TIME TO TEST

Answer 6

In your jquery-ui.js search for the following section and change heightstyle: "auto" to heightstyle: "content" so the updated file will look like this.

var accordion = $.widget( "ui.accordion", {
  version: "1.11.4",
  options: {
    active: 0,
    animate: {},
    collapsible: false,
    event: "click",
    header: "> li > :first-child,> :not(li):even",
    heightStyle: "content",
    icons: {
        activeHeader: "ui-icon-triangle-1-s",
        header: "ui-icon-triangle-1-e"
    },

    // callbacks
    activate: null,
    beforeActivate: null
},