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
The div that will show/hide
<div class="contentheader" onclick="slide('teamTable')">
<table class="resultstable" id="teamTable">
I'd really appreciate it if someone could help.
var slideTime = 500;
var divID = null;
var origianlDivHeight = null;
var slideInterval = null;
var sliding = false;
var stopSlider = null;
var slideTime = null;
var divHeight = null;
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
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
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
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.
Thanks for the reply.
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.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)