Quick fading tabs with scriptaculous
I was recently working on a website project where I realized I basically had too much data to neatly show on 1 page, so I decided to add a really simple tab like area to the page, and a cool fade as we moved between tabs. Essentially each tab area is represented by a DIV tag, and a quick bit of javascript hides and shows the DIV's.First download & add the prototype and scriptaculous libraries to your page...<head>
<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="scripts/scriptaculous.js?load=effects" type="text/javascript"></script>
</head>Here's the real simple javascript code that hides all the DIV's and then shows the selected one. Note that I'm just using 2 tabs in this example...<script>
function showId(id) {
var ids=new Array('1','2');
for (var i=0;i<ids.length;i++)
$(ids[i]).style.display = 'none';
$(id).appear();
}
</script>The tabs themselves are just A links. When you click on one of the links, it fires the above script code...Pages:
info
homeAnd finally each tab area is just a DIV too. Obviously, you would replace ... content ... with whatever content you wanted to show in each tab...<div id="1" style="display:inline;"> ... content ... </div>
<div id="2" style="display:none;"> ... content ... </div>And that's it! You can see the effect on some of the pages at http://iphone.rosscoops.com
<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="scripts/scriptaculous.js?load=effects" type="text/javascript"></script>
</head>Here's the real simple javascript code that hides all the DIV's and then shows the selected one. Note that I'm just using 2 tabs in this example...<script>
function showId(id) {
var ids=new Array('1','2');
for (var i=0;i<ids.length;i++)
$(ids[i]).style.display = 'none';
$(id).appear();
}
</script>The tabs themselves are just A links. When you click on one of the links, it fires the above script code...Pages:
info
homeAnd finally each tab area is just a DIV too. Obviously, you would replace ... content ... with whatever content you wanted to show in each tab...<div id="1" style="display:inline;"> ... content ... </div>
<div id="2" style="display:none;"> ... content ... </div>And that's it! You can see the effect on some of the pages at http://iphone.rosscoops.com
