RSS feed

Squidoo Lens

Categories

How to swap content areas (divs) JS free

There’s a lot of scripts out there which will allow you to swap out one content area (div) for another when a link or button is clicked. However if you just want a nice simple div swap no Javascript is necessary, all you need is CSS and HTML.

You won’t get any sort of Fancy transition, or fade effect like certain JS libraries such as JQuery can provide, but this is easy to do, and nice and lightweight.

This particular content swap looks best when the link or button clicked to swap content floats next to the div that has the content to be swapped, since this does use jump links, and you might want to minimize the affect of it jumping down the page. It also works great on pages where the bulk of the page length is taken up by the area where the swap takes place.

You can of course get a lot more creative with designing the look of your content swap, but here’s what a pretty basic one will look like:

area 2
back to area 1
This is content area 1.
This is content area 2.

And this is the basic HTML markup that you’ll need for it to work:

<a href="#area2">Click here to see content area 2</a>
<a href="#area1">Click here to go back to content area 1</a>
<div id="contentareas">
<div id="area1">This is content area 1.</div>
<div id="area2">This is content area 2.</div>
</div>

And the CSS (just the basics you’ll need for it to work):

#contentareas
{
/* in order for the swap to work overflow must be hidden so that you don't
see both content areas. You must also have a set height and width. */
position:relative;
height:200px;
width:300px;
overflow:hidden;
}

#area1
{
position:relative;
height:192px;
width: 280px;
/* again you'll want to set height and width on this div. */
}

#area2
{
position:relative;
height:192px;
width: 280px;
/* for every area make sure you've set height and width. 
If you see part of the previous area peaking through, make sure to adjust
the height and width of that area until it can no longer be seen once you
switch to the next area down */
}

And that’s all you need for your content swap to work! Beyond that it’s just a matter of making it look nice.