Trying to get div to collapse vertically

Not sure why I can’t get it to do this but, you will see the food section is highlighted and expanded correctly, but when you click on “appetizers”, the div does not collapse vertically around it.

Is this something I can fix in the CSS? Thanks!

http://baseboardbuddy.com/?page_id=2

The slider div contains all of the other divs, which vary in height. Even though they do not all appear at once, they are still in there, so you may be out of luck.

You could try a tab system instead, I suppose: http://jqueryui.com/demos/tabs/

HI, it’d be a bit awkward to. I wouldn’t set heights on it just because content could overfill and overlap onto the footer.

Right now I’d say either use JS to find the height and then (not to contradict myself :)) set an elastic height on the parent that holds that stuff.

You possibly could solve this with CSS alone, although (not having looked ath teh HTML fully) the selectors wouldn’t work in IE6 and perhaps could succumg to other browser bugs.

Right now I’d stick to JS to fix this or leave it be.

There is just one big wide div holding all of the other divs, so it will be as high as the tallest inner div no matter what, I’d have thought. I suspect if there’s a way to alter the appearance with JS, it would be a complicated script.

The script wouldn’t be too comlicated. It’d have to just detect the tab (easy enough) and then set a non-fixed height big enough to crop the extra background color.

Definately not an optimal solution however :). Your HTML would need a complete makeover to make this better. But alas…

Thanks everyone.

I am not handy with editing jquery code so I will probably leave it be.

Thanks again!

Well if you had on over to the JS forum on here they can easily write you a script (most likely).

They are friendly over there ;).

Just posted up over there…

Hopefully they can help :slight_smile: