Changing style.display using javascript not working in IE

August 8, 2008

I was using a fairly simple js script to show/hide a div. Worked fine in firefox, didn’t work at all in IE (and had the unexpected side-effect of hiding the link I wanted to click on to toggle the show/hide). The problem code is below:

<a href="#specialConditions" name="specialConditions"
onclick="toggleDisplay('specialConditions');"> Special conds</a>

<div id="specialConditions" style="display: none;">
    ...
</div>

The function toggleDisplay() just sets style.display=’none’ if it’s equal to ‘block’ and vice-versa.

The problem turned out to be the ‘name=”specialConditions”‘ in the link – IE seems to confuse names and IDs in getElementById(), so document.getElementById(‘specialConditions’) was returning the link instead of the div.

So I changed the value of “name” in the link and it worked fine:

<a href="#specialConditionsAnchor" name="specialConditionsAnchor"
onclick="toggleDisplay('specialConditions');"> Special conds</a>

<div id="specialConditions" style="display: none;">
    ...
</div>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: