Spry Collapsible Panel within Collapsible Panel, inconsistent errors.

Question

Hello everyone it is me again with another question. The booking system located here http://www.divethegap.com/scuba-diving-programmes-dive-the-gap/divemaster-training.php?cat=16

There are 3 main collapsible panels controlled by the spry framework. There are then over a dozen more inside the first collapsible panel as you can see on that page. When you open one of those by pressing one of the 'learn more' buttons you will see that the main collapsible panel that it is in also expands to fit that content and the contracts if you close the smaller panel again.

However as soon as you go to the next main collapsible panel 'summery and quote' and then go back to the first main panel by pressing the button that says 'back' there are problems. Now if you open up one of the smaller panels inside the first main panel you will see that the main panel does not expand to fit the contents and in fact the content of the smaller panels spreads over the other content, floating above it. Does anybody know how to fix this?

Many Thanks,

Answer 1

Problem solved for anyone who is also stuck.

Open up the SpryCollapsiblePanel.js . Find the line that says

this.content.style.height = this.toHeight + "px";

And change it to .

this.content.style.height = "auto";

All problems solved with resizing content of collapsible panels where another collapsible panel is the content.