I am facing an issue with my code. Originally, I was using getElementById(), but since the function needs to apply to multiple links, I switched to getElementByClassName(). However, it isn't returning any results. I have provided all the details on jsFiddle
Here is a snippet of the javascript:
var myBoxWidth = 0;
var myBoxWidth2 = 0;
// show
function show() {
var myBox = document.getElementByClassName('box');
var myContent = document.getElementByClassName('content');
myContent.style.display = 'inline';
myBox.style.width = myBoxWidth + '%';
if(myBoxWidth < 80) {
myBoxWidth += 20;
setTimeout(show,55);
}
}
// hide
function hide() {
var myBox = document.getElementByClassName('box');
var myContent = document.getElementByClassName('content');
myContent.style.display = 'none';
var currentWidthVal = parseInt(myBox.style.width,10);
if(myBoxWidth2 < currentWidthVal) {
setTimeout(hide,55);
myBox.style.width = currentWidthVal = currentWidthVal - 20 + '%';
myBoxWidth = 0;
}
}