I've got a "1 page" website which has this content change via jQuery whenever you click a hyperlink.

This is a sample from the DIV designs:

<div id="div1" class="scroll-pane">
</div>
<div id="div2" class="scroll-pane">
</div>
<div id="div3" class="scroll-pane">
</div>

Then when clicking on a single link for instance "div1" will diminish and "div2" (formerly hidden) will fade in instead. All the DIVs have a similar CSS positions as one another. My DIVs all possess a jScrollPane, yet it appears they stack on the top of one another and div3's pane is attracted on the top from the others all the time. I am speculating it has related to an order they're produced within the HTML maybe? 2's pane is above 1's pane, and 3's pane is above 2 and 1's pane.

So even if all div3's contents are hidden its pane remains visible and overlapping another two DIVs underneath. In order to only inderact with div3's scrollability as the other DIVs are 'underneath' and never obtainable.

I'm able to hide the JScrollPanes however i are only able to appear to deal with these simultaneously. Basically tell jScrollPane to cover, all of them hide... I have attempted altering the zIndex from the DIVs instead of jScrollPane's classes because they fade out and in, but this does not alter the zIndex from the panes themselves. When I also have hidden the DIVs however the panes remain behind.

It is possible to method to control the jScrollPanes individually making their zIndex change or make sure they are really hide individually together with their DIVs without just these vanishing?

Assistance will be greatly appreciated.