CSS Content Swap Tutorial

View Demo 1 (simple as it gets)View Demo 2 (with Opera fix)

Not much to this, so I'll make it quick. This is simply using named anchors (in this case ID's) to switch out content. In other words, giving CSS the "onClick" power of JS.

The HTML

<a href="#one">One</a>
<a href="#two">Two</a>
<a href="#three">Three</a>

<div id="swap">
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
</div>

The CSS

#swap {
float:right;
height:30em;
width:300px;
overflow:hidden;
border:1px solid;
}
#one, #two, #three {
height:30em;
}

ADVERTISE HERE