Forum Moderators: open
I have 3 starting divs on my page, each one expanding onclick. The show/hide elemant works fine. There is one slight problem... I want the user to be able to click anywhere inside the starting div in order for the hidden div to be revealed. This is ok for the first set of divs, but you can only click on the text or border for the second and third div sets. I can't figure out for the life of me why the second and third divs aren't allowing the onclick anywhere inside the div. The HTML and CSS are identical for all 3 and i dont think its a JS problem.
The whole thing works fine in Firefox just not IE!
Here's my HTML:
<div id="contact_us_conatiner"><div id="gallery">
<!-- TAB 1 -->
<div class="off" title="tab1"><p>UK Orders</p></div>
<div id="tab1" class="hide">
<p>Question 1</p>
</div><!-- TAB 2 -->
<div class="off" title="tab2"><p>Product Technical Support</p></div>
<div id="tab2" class="hide">
<p>Question 2</p>
</div><!-- TAB 3 -->
<div class="off" title="tab3"><p>Regional Sales Specialists</p></div>
<div id="tab3" class="hide">
<p>content 3</p>
</div></div><!-- END - gallery div -->
</div><!-- END - contact_us_conatiner -->
CSS:
* {
padding:0;
margin:0;
}
#contact_us_conatiner {
width:727px;
position:relative;
float:left;
margin-left:30px;
margin-top:30px;
}
#gallery {
font:11px arial,sans-serif;
width:700px;
height:33px;
line-height:15px;
position:relative;
float:left;
z-index:200;
}
#gallery div.off {
width:600px;
color:#000;
float:left;
border:1px solid #ddd;
cursor:pointer;
text-align:center;
height:33px;
line-height:33px;
position:relative;
z-index:120;
margin-bottom:20px;
}
#gallery div.on {
width:600px;
color:#c00;
float:left;
border:1px solid #000;
border-bottom:0;
cursor:pointer;
text-align:center;
height:33px;
line-height:32px;
position:relative;
z-index:100;
}
div.hide {
display:none;
width:0;
overflow:hidden;
}
div.show {
width:600px;
height:115px;
margin-top:0;
border:1px solid #000;
border-top:0;
position:relative;
z-index:50;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
float:left;
margin-bottom:20px;
}
.clear {clear:both;}
JS:
onload = function() {
var e, i = 0;
while (e = document.getElementById('gallery').getElementsByTa gName ('DIV') [i++]) {
if (e.className == 'on' ¦¦ e.className == 'off') {
e.onclick = function () {
var getEls = document.getElementsByTagName('DIV');
for (var z=0; z<getEls.length; z++) {
getEls[z].className=getEls[z].className.replace('show', 'hide');
getEls[z].className=getEls[z].className.replace('on', 'off');
}
this.className = 'on';
var max = this.getAttribute('title');
document.getElementById(max).className = "show";
}
}
}}
Any help would be MUCH appreciated!
Thanks in advance
Ryan
[edited by: tedster at 6:01 pm (utc) on May 28, 2008]
[edit reason] added some formatting [/edit]
Cheers,
Ryan
