jQuery Accordion auto height issue: too much white space/height

Question

I know this has been asked before here, but I have tried everything in that thread and similar posts and cannot figure this out.

$(function() {
$("#notaccordion1").accordion({autoHeight: 'false', heightStyle: 'content', collapsible: true, active: false});
});

Each of my expandable accordion divs has a bunch of white space at the bottom. Check out the fiddle: http://jsfiddle.net/pfeff/tH4rd/

Answer 1

The Accordian CSS has quite a bit of padding set around the div. You can override this with your own css.

.ui-accordion .ui-accordion-content {
    padding-bottom: 0px;
}

Fiddle

http://jsfiddle.net/tH4rd/1/

The same applies for the white space above if you want to get rid of that padding set the padding-top: 0px as well.

Update

Here is an update based off your second example.

Here you don't need the css because you are not using paragraphs in your accordion which add extra padding. All I did was modify your myAccordion function so that it closes the rest of the open accordion sections when a new one is opened. (It wasn't doing that before)

http://jsfiddle.net/tH4rd/3/