Accordion Height Issue


I’m working on a free HTML5 template, and all is going well, apart from the fact that I can’t work out why each of the accordion sections is a set height (apart from the 1st one which is automatically selected - if you click on the sections below that, they are all a set height).

This is the page:

I’ve inspected the element with Firebug, and it shows the height is 326px, but when I look through the CSS, there is no mention of that value, or anything setting the height of the accordion.

I’d like to just have the accordion sections to take the height of the content inside them, but can’t see how to do it.

Any advice much appreciated.



Accordions generally work by the JS scanning through all the elements and setting the height of all elements to the height of the tallest content in that block. This is what is happening in your accordion and if you look at the html in Firebug you can see that an inline style has been written with a height of 326px.

The reason for this is that if you don’t do that then the accordion will jump up and down each time a menu opens (and so will the page height) and will look unsightly and be hard to use.

You can over-ride the issue with css as follows.


However you wil now see that the accordion is jumpy and unusable. Also jquery likes to animated fixed height elements and sliding auto height elements is often very jerky.

Therefore if you use accordions its best to use them with content of similar sizes and let the js fix the height to the tallest.