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 **
** Link Content **
** Portfolio Content **
** Post Content **
