Menu
I’ve been searching for a specific answer for this for some time so I wouldn’t have to bother anyone with this, so I hope it’s not too much of a pain here…
I’ve modified this code so that it will show when clicked, while at the same time closing all other “boxes”. In doing so, it is broken for IE. This works without issue in FF and Opera.
I know it has something to do with getElementById, but I don’t know how to solve it. I’ve really tried before I got here. Does anyone have any suggestions?
I am also open to a different method if there is just something stupid I’m missing that would make it that much easier. I’m mainly a web designer and only dabble in java script which I’d like to change.
Thank you very much for your time,
John
[code=php]
<!—- stack_flip.js – modified from online sources –>
function showOrHide(eId, state)
{
if (e = document.getElementById(eId))
{
if (state == null)
{
state = e.style.display == ‘none’;
e.style.display = (state ? ” : ‘none’);
}
if (eId == “box1”) { hideAll1() }
if (eId == “box2”) { hideAll2() }
if (eId == “box3”) { hideAll3() }
if (eId == “box4”) { hideAll4() }
}
}
function hideAll1(){
document.getElementById(‘box1’).style.display = ‘table’;
document.getElementById(‘box2’).style.display = ‘none’;
document.getElementById(‘box3’).style.display = ‘none’;
document.getElementById(‘box4’).style.display = ‘none’;
}
function hideAll2(){
document.getElementById(‘box1’).style.display = ‘none’;
document.getElementById(‘box2’).style.display = ‘table’;
document.getElementById(‘box3’).style.display = ‘none’;
document.getElementById(‘box4’).style.display = ‘none’;
}
function hideAll3(){
document.getElementById(‘box1’).style.display = ‘none’;
document.getElementById(‘box2’).style.display = ‘none’;
document.getElementById(‘box3’).style.display = ‘table’;
document.getElementById(‘box4’).style.display = ‘none’;
}
function hideAll4(){
document.getElementById(‘box1’).style.display = ‘none’;
document.getElementById(‘box2’).style.display = ‘none’;
document.getElementById(‘box3’).style.display = ‘none’;
document.getElementById(‘box4’).style.display = ‘table’;
}
<!———————————>
Here is an HTML snippet of the function being called:
[code=php]
<!——– HTML call snippet ——->
<a style=”text-decoration:none” href=”javascript:;” onclick=”showOrHide(‘box4’)” class=”itemLink” style=”text-align:justify”>
<font face=”Arial” color=”maroon” size=”3″><b>Important information</b><br></a>
<div id=”box4″ style=”display:none; width: 300px”>
<!– update an iframe in center of page –>
<div style=”z-index: 19; left: 288px; width: 510px; position: absolute; top: -130px; height: 120px”>
<iframe src=”open_notes.html” width=”510″ height=”1050″ scrolling=”no” frameborder=”0″>
</iframe>
</div>
<!– end iframe –>
<ul>
<li>List of important sub-stuff</li>
<li>More sub-stuff</li>
</ul>
</div>
<!—————————–>