Hi All,
I'm new to this forum and to javascript - I've been learning html and css for a hobby and now I'm starting on javascript.
I've been looking around for tutorials on how to make a div slide to show and hide content. I found a few tutorials and from them wrote my code below to make a div hide content (once I have that down then I'll attempt the hide content code) but I can't get it to work. I don't want to simply copy the code as I want to learn it as I go along (which is why I wrote my own).
I'd appreciate it if anyone could take a look and point out what is wrong and explain if possible so that I can learn more.
I am clicking one div and making another show/hide content so the div code is:
The div to click
<div class="contentheader" onclick="slide('teamTable')">
The div that will show/hide
<table class="resultstable" id="teamTable">
The javascript
var slideTime = 500;
var divID = null;
var origianlDivHeight = null;
var slideInterval = null;
var sliding = false;
var stopSlider = null;
var slideTime = null;
var divHeight = null;
function slide(id)
{
divId = document.getElementById(id); // get the div
originalDivHeight = parseInt(divId.style.height); // get the height of the div
divHeight = originalDivHeight; // save the height of the div into a second variable
slideInterval = slideTime/divHeight; // set the slide interval by dividing the slidetime by the div height to make sure all slides are the same time.
if(sliding) // if the div is sliding return so that it cannot be clicked again whilst it is sliding
return;
sliding = true; // set sliding to true
if(divId.style.display == "none") // if the display = none do the below:
{
stopSlider = setInterval("slideUp()",slideTime); // start slideup
}
else // otherwise:
{
stopSlider = setInterval("slideDown()",slideTime); // start slidedown
}
}
function slideUp()
{
if(divHeight<=0) // if the divheight is less than or equal to 0 (has finished sliding) do the following:
{
sliding = false; // set sliding to false
divId.style.display = "hidden"; // set the divs display to hidden to completely hide it
divId.style.height = originalDivHeight; // set the divs height back to its original height
clearInterval(stopSlider); // stop the interval
}
else // otherwise:
{
divHeight-=slideInterval; // reduce the divs height by the slideinterval
if(divHeight < 0) // if the div height is less than 0 set the div height to 0
divHeight = 0;
divId.style.height = divHeight; // set the divs height to the new height
}
}
I'd really appreciate it if someone could help.
