jQuery make divs the same height on click

I've got a problem which you can look at here http://jsfiddle.net/dng2P/4/

If you click the detail button it shows you information and then if you click t开发者_如何学Che "Points Statement" button it slides a layer down.

My problem is that I'm trying to make the main booking details div the same height as the points div if it's bigger and then when you click close put the main booking details height back to what it was originally.

It's half working as the main booking details div becomes the same height as the points div but just doesn't go back to what it was originally

Can anyone help?

Thanks

Jamie

How's this? http://jsfiddle.net/dng2P/8/

All you did wrong was failing to keep the original height around properly. You only declared bookingdetailheight as a local variable which means it got re-declared for every toggle, and removed after every toggle was complete. I tied the original height to the DOM element with using .data(), it simplifies things when you might have people opening two of those toggles simultaneously.

I got on a roll though, so tidied up a bit and made the outer animate along with the inner. Oh and please look up the proper traversal methods in jQuery, parent().parent().parent().find() is asking for trouble. I think there's some left in parts I didn't look at.

I had a quick look at the jsfiddle code. I think the value that you take into the bookingdetailHeight should be declared outside the scope of the .points toggle function. that may help a little. just gonna try that :)

[edit] - didn't solve it -sorry :(