Picnic Website Code Tutorials

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;
}
		

Need help adding this or other code to your website? Post it here in the forum! Forum

Sponsors

Top Donators

Friends of Mine