JavaScript : Div Swapping for tabbed Content

After getting the blog posts to work in the calendar system this morning, i was struggling to work out how i was going to operate the rest of the site when the bulk of the content will be relatively hidden inside the calendar function.

A work mate of mine posted a twitter post a few days ago with sites that are based all around one large page and creatively controlled by nifty, well thought out JavaScript’s; Which gave me an idea. So on the way home on the train i started to play with a small script to switch the sections Via JavaScript all on one single page.

So here’s the stripped down, functioning code.

The JavaScript:

	function HideContent(d) {
		document.getElementById(d).style.display = "none";
	function ShowContent(d) {
		document.getElementById(d).style.display = "block";

An alternative to this JavaScript, Although you would have to alter more code in the HTML sections could be:
This would be more efficient if you have a large amount of tabs

function ReverseContentDisplay(d) {
	if(document.getElementById(d).style.display == "none") {
		document.getElementById(d).style.display = "block";
	} else {
		document.getElementById(d).style.display = "none";

The CSS:

.menu_system {
	font-size: 12px;
	list-style: none;


li.menu_system:hover {
    color: #222;

The Tag:

The Menu HTML:


The Content HTML:

** Your Page Content **
** Portfolio Content **
** Post Content **

Leave a Reply