Question

I’ve created a menu with an expand/collapse effect using some jQuery and CSS (and obviously HTML)

I’m using CSS for the transitions with the max-height trick (It really is incredible what you can do with CSS at the moment)

Anyway, if you click on a parent menu item, it should expand to show it’s children, and at the same time close any other expanded lists. This works perfectly, however it causes a jumping effect whereby the elements below it shift.

I’m not sure if I’m explaining this particularly well, so please see this fiddle of the code I am using (I would paste code here but there is rather a lot)

Am I missing something obvious here? Is there a way to manipulate the CSS so that it doesn’t nudge the elements below when expanding/collapsing? Or am I going to have to give in and use jQuery to achieve this effect?

EDIT: If it’s not clear what I want to achieve, please see the right hand menu here, try expanding the first two elements, it doesn’t shift the others out of place.

EDIT2: For anyone interested, the shifting was caused via the max-height value, if you set it to 100 for the demo then the menu items don’t shift, however content is cut off and having a short min-height means adding menu items in the future becomes quite burdensome.

Unfortunately it looks like something as simple as transitioning height from 0 to auto is unnecessarily complicated with CSS transitions!

Answer 1

Is this the sort of thing that you are after?

$(document).ready(function() {

$('div.accordionButton').click(function() {
    $('div.accordionContent').slideUp('normal');    
    $(this).next().slideDown('normal');
});


$("div.accordionContent").hide();

});​

http://jsfiddle.net/ma9ic/zR5aY/2/