I have a page based on the template:
2 column elastic, left sidebar and footer
My goal is to make an unusually long page visually shorter by using a show/hide layers behavior to hide and reveal blocks of content.
For the most part it (the page/template) seems to work well and fits design and functionality needs. I have encountered one problem though. I think I am missing something obvious.
I have added several additional layers. Each of these layers is “hidden” until the user clicks a link that reveals that layer. If the user then clicks a different link, the originally displayed layer disappears and the new layer appears. Functionally, this works fine.
The problem is one of position and wrap (elasticity).
I want the main content layer to expand and contract as it displays the various layers (with variable length content).
Right now a large amount of white space is displayed at the bottom of the main content page. What I want is for the additional content, as it is made visible to expand the main content div, when the content is hidden I want the bottom of the main content layer to snap back up, leaving no blank white space.
Additionally, the layers (as they appear and disappear) display in different locations on the page. Layer one displays in the correct location, right under the last piece of static text in the main content.
With div layer 1:
<div id="Layer1" style="z-index:10; visibility: hidden; background-color:#CCFFFF">Something One<br class="clearfloat" /></div>
With layer 2 the content appears much further down the page with a large white space separating it from the last piece of static text:
<div id="Layer2" style="z-index:20; visibility: hidden; background-color:#99FFFF">Something Two<br class="clearfloat" /></div>
Does anyone have any ideas as to what I need to do to get the desired functionality?
Thank you Nancy,
I'll look into using Spry for the functionality.