Code:
<script>
//page dimentions
var tabWidth=300;
var tabHeight=document.getElementById("experienceshadow").clientHeight;
var defaultSpeed=400;
var numRows=2;
var tabs = [];
//tab constructer
function tab(divID,row,col)
{
// jquery referencer
this.div=$('div#'+divID);
tabs.push(divID);
// store dimentions of divs into variables
this.height=document.getElementById(divID).clientHeight;
// row and column of tab iterates from 0
this.row=row;
this.col=col;
// position of tabs based on row and column number
this.left=col*parseInt(tabWidth);
this.top=row*parseInt(tabHeight);
// when page initializes, all windows are open, before the initilization fucntion which closes them all
// thus we have to set all to open so initilization function sets them to false when closing them
this.open=true;
// toggle boolian to determine if div is open or closed
this.toggle=toggle;
function toggle()
{
if(this.open==true)
{
this.open=false;
}
else
{
this.open=true;
}
}
}
// create tabs
experience=new tab("experience",0,0);
education=new tab("education",0,1);
software=new tab("software",0,2);
codesamples=new tab("codesamples",1,0);
references=new tab("references",1,1);
links=new tab("links",1,2);
// jquery functions to open and close tabs
(function()
{
// close a tab
$.fn.CloseHopin = function(currentTab)
{
return $(this).animate
(
{
'height': tabHeight+'px',
}
, defaultSpeed || 400
)
.animate
(
{
'left': currentTab.left+'px',
'width': tabWidth+'px',
}
, defaultSpeed || 400
)
.animate
(
{
'top': currentTab.top+'px',
}
, defaultSpeed || 400
);
}
// open a tab
$.fn.OpenHopin = function(currentTab)
{
return $(this).animate
(
{
'top': (tabHeight*numRows)+'px',
}
, defaultSpeed || 400
)
.animate
(
{
'left': '0px',
'width': '900px',
}
, defaultSpeed || 400
)
.animate
(
{
'height': currentTab.height+'px',
}
, defaultSpeed || 400
);
}
// close a tab then open another
$.fn.CloseOpen = function(currentTab,newTab)
{
return $(this).animate
(
{
'height': tabHeight+'px',
}
, defaultSpeed || 400
)
.animate
(
{
'left': currentTab.left+'px',
'width': tabWidth+'px',
}
, defaultSpeed || 400
)
.animate
(
{
'top': currentTab.top+'px',
}
, defaultSpeed || 400
,"swing"
//error here
,function()
{
newtab.toggle();
$(this).OpenHopin(newtab);
}
);
}
// function to open or close a tab
$.fn.OpenToggle = function(currentTab)
{
// if its open close it
if(currentTab.open)
{
currentTab.toggle();
$(this).CloseHopin(currentTab);
}
// if its closed open it
else
{
$.each( tabs, function( key, value ) {
var obj = eval(value);
if(obj.open){
obj.toggle();
obj.div.CloseOpen(currentTab,obj);
return false;
}
});
//uncommenting this code will open the tabs, but at the same time as closing them
//trying to replace this code with the last few lines of CloseOpen()
//currentTab.toggle();
//$(this).OpenHopin(currentTab);
}
/*
else
{
// close other windows if they are open, then open the clicked window
// error here
if(experience.open)
{
experience.div.toggle();
experience.div.CloseHopin(experience);
}
if(education.open)
{
education.div.toggle();
education.div.CloseHopin(education);
}
if(software.open)
{
software.div.toggle();
software.div.CloseHopin(software);
}
if(codesamples.open)
{
codesamples.div.toggle();
codesamples.div.CloseHopin(codesamples);
}
if(references.open)
{
references.div.toggle();
references.div.CloseHopin(references);
}
if(links.open)
{
links.div.toggle();
links.div.CloseHopin(links);
links.div.promise().done(function()
{
currentTab.toggle();
currentTab.div.OpenHopin(currentTab);
});
}
}
*/
};
// add functions to the tabs
experience.div.on('click', function() {
experience.div.OpenToggle(experience);
});
education.div.on('click', function() {
education.div.OpenToggle(education);
});
software.div.on('click', function() {
software.div.OpenToggle(software);
});
codesamples.div.on('click', function() {
codesamples.div.OpenToggle(codesamples);
});
references.div.on('click', function() {
references.div.OpenToggle(references);
});
links.div.on('click', function() {
links.div.OpenToggle(links);
});
})();
// when page initializes, close all tabs
(function() {
experience.div.OpenToggle(experience);
education.div.OpenToggle(education);
software.div.OpenToggle(software);
codesamples.div.OpenToggle(codesamples);
references.div.OpenToggle(references);
links.div.OpenToggle(links);
})();
</script>