If you go to kabseo.com (my resume) You will find I have written my first script.

It is a simple toggle action. However, it doesn't work if any "div's" are added to the source code because the toggle is dependent upon div.length.

I was hoping that someone could help me with this. I tried all sorts of window.onload options to store the new counted div.length as a variable, and then use it later on in that function but none of it worked. I am about ready to pull my hair out .

You'll notcie that the toggle on the website works fine unless you have an addon like seoquake on Goggle Chrome, which is an addon that adds the number of divs to your source code.

Can somebody please help?

here is the script -

var div = document.getElementsByTagName('div');


function forLoopToggle(id) {

var chosenTab = document.getElementById(id);

//loop between the 6th and after divs - the initial value is for Google chrome, and if someone has SEO quake because an extra div is added in that case
for (var toggle = 7; toggle < div.length; toggle++) {

//for clicking on experience
if (div[toggle] == chosenTab && chosenTab.id == 'experience' && chosenTab.style.display != 'block') {
div[toggle].style.display = 'block';
div[++toggle].style.display = 'block';
div[++toggle].style.display = 'block';
div[++toggle].style.display = 'block';
div[++toggle].style.display = 'block';
div[++toggle].style.display = 'block';
div[7].style.display = 'block';//employment div
div[8].style.display = 'none';
}

//for clicking on projects
if (div[toggle] == chosenTab && chosenTab.id == 'projects' && chosenTab.style.display != 'block') {
div[toggle].style.display = 'block';
div[++toggle].style.display = 'block';
div[++toggle].style.display = 'block';
div[++toggle].style.display = 'block';
div[++toggle].style.display = 'block';
div[7].style.display = 'none';
div[8].style.display = 'block';//keyword div
}

//for clicking on a div which display is currently none
else if (div[toggle] == chosenTab && chosenTab.style.display != 'block') {
div[toggle].style.display = 'block';
div[7].style.display = 'none';
div[8].style.display = 'none';
}

//all divs that have not been clicked on will not be shown
else if (div[toggle] != chosenTab) {
div[toggle].style.display = 'none';
}
else if (div[toggle] = chosenTab && chosenTab.style.display == 'block') {
div[toggle].style.display = 'none';
}
//allows you toggle on and off of the same div

else {
div[toggle].style.display = 'none';
div[7].style.display = 'none';
div[8].style.display = 'none';
}
}
}