By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,466 Members | 1,136 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,466 IT Pros & Developers. It's quick & easy.

show/hide div not fully working in IE

P: 19
Hi,
Im making a 'contact us' page. The user click on the div, this then reveals another larger div displaying more information giving the effect of the box expanding or dropping down.

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 the JS seems to be fine.
The whole thing works fine in Firefox just not IE!

Here's an online example:
http://testsite.fisher.co.uk/2008_Redesign/contact_us/contact_us_TEST2.html

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
May 28 '08 #1
Share this Question
Share on Google+
3 Replies


hsriat
Expert 100+
P: 1,654
working fine in all browsers for me....
May 28 '08 #2

P: 19
Yes it works, but in IE you have to click on the text inside the second and third bars (product technical support and Regional sales specialists)
I want the user to be able to click anywhere inside the bars, like with the top bar.
May 28 '08 #3

hsriat
Expert 100+
P: 1,654
Yes it works, but in IE you have to click on the text inside the second and third bars (product technical support and Regional sales specialists)
I want the user to be able to click anywhere inside the bars, like with the top bar.
Hey, I'm the same guy in the JavaScript forum :D
We'll continue it there only.
May 28 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.