I want to create a visual representation of a stack of paper sheets as a metaphor. The idea is to neatly stack the sheets on top of each other, with only the header of each sheet visible and the rest of the content covered.
!-------------- | Sheet 1 +-------------- | Sheet 2 +-------------- | Sheet 3 | | |
Additionally, I would like the ability to 'activate' a specific sheet, causing all other sheets to move down and reveal the content of the active sheet.
Here's an example:
!-------------- | Sheet 1 +-------------- | Sheet 2 | | Sheet 2 content | goes here | this sheet is | 'active' | +-------------- | Sheet 3 | | |
To achieve this, I have tried using DIV containers with negative top margins, but this method only works for fixed height sheets. I have also created an .active class to attach to the active sheet's DIV in order to reveal its content.
This is the CSS I have used:
.sheet {
position: relative;
width: 650px;
height: 550px;
margin: -465px auto 0 auto;
}
.sheet .active + .sheet {
margin: 0 auto 0 auto;
}
However, this solution is limited to fixed heights. I am looking for a way to make it work with variable sheet heights. Any suggestions?
(By the way: No need to worry about compatibility with older browsers like IE<9)