Sliding Div

[djrdoo]

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.

[George88]

Your code isn't in working order. First, your <div class="contentheader" onclick="slide('teamTable')"> isn't closed with </div>, has no contents (innerHTML) and no styling, so may as well be invisible. Your "div that will show/hide" isn't even a <div>, it's a table with no table elements and no closing tag.

Can you post code that is in working order? I'm assuming this isn't all your code, because it doesn't do anything in its current state.

[djrdoo]

Thanks for the reply.

Sorry for not explaining, I have the css in a separate document and I have just included the opening tags where it references the id's and the JavaScript. The problem however, is in the JavaScript so I have posted all of that. Let me know if you need the whole thing to help.

[George88]

The problem may be in the JavaScript, but this JavaScript isn't going to work in its current state anyway because the project is broken. Without the entire source the interactivity between JavaScript and DOM elements is not going to take place, so debugging becomes much harder.

Why not post as much code as is necessary for a working "demo" of the project so far? It doesn't sound like a tough problem but without more source code, I don't think anyone is going to be helping out. I don't want to go second guessing your thoughts or plans or try to presuppose what you were attempting to do at 7:48 PM and 24 seconds on Friday evening, so I'm not going to attempt to debug incomplete code.