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 {
	vertical-align:middle;
	font-size: 12px;
	list-style: none;
	display:-moz-inline-stack;
	display:inline-block;
	zoom:1;
	*display:inline;

}

li.menu_system:hover {
    color: #222;
    text-decoration:none;
}

The Tag:


The Menu HTML:

     

The Content HTML:

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

Leave a Reply