recalculate div height after jquery UI accordion sliding

Question

Dear all,

i have a page with 2 columns, content and sidebar (dom (html + css) not created by me, and there is no time to recreate the system)

there is some jquery on document ready, to calculate the height of the content, and make the sidebar the same height.

now recently we were asked to insert an accordion, and the previous person that worked on the site, integrated jQuery UI Accordion which does the trick fine with the autoHeight property to true (because al elements have equal height, the site stays the same height.)

but this makes all items as heigh as the biggest item, so Questions with an answer of only 1 or 2 lines, had more than 300px whitespace between them and the next question, we want to fix this, by turning the autoheight property to false, but then, we get the problem that the jquery calculates the height of the 2 columns to the first opened question (beeing a short one) after then selecting a larger question, the accordion scrolls over the footer

anyone got an idea on what might be the shortest acceptable solution?

• jquery UI accordion does not have an event hook after sliding 1 item. (to recalculate the page height...)

so would you: 1) take another accordion with event hook (i suspect the page height will jump and stutter possibly) 2) fix the other thing, and find a solution for the calculating of the height, by using images, or other css, instead of the jquery to calculate the height.

Sander

PS: this is basicly just a question to get some input on what would be the best solution i do not really expect ready to use code but if you can hint me towards the quickest/most beautiful solution...

Answer 1

If I understand you correctly, one column of you page layout has an accordion, and when the page loads, you calculate the height of the column with the accordion, and apply that height to the other column if necessary. With variable length accordion elements, you run into trouble.

I would not attempt to re-size the column each time the accordion is invoked, because the page will jerk around. What I would do instead is try to determine the MAX length of the accordion elements, and use that to calculate the other column's length. Sure you might get some unnecessary white space at times, but it's better than having the page length jerk around.