Exandible list doesn't work in Internet Explorer

[pianoman993]

Here is an expandable list. The problem is, it doesn't work in internet explorer (It displays everything on load instead of being collapsed). However this script runs great in everything but! .. go figure :/

 

If anyone has a solution, I would greatly appreciate it!

 

function toggle(id) {
    ul = id;
    img = "arrow_" + id;

    ulElement = document.getElementById(ul);
    imgElement = document.getElementById(img);

    if (ulElement){
            if (ulElement.style.display=='none'){
                ulElement.style.display=''
                imgElement.src = "img/icons/arrow_top.gif";
            }else{
                ulElement.style.display='none'
                imgElement.src = "img/icons/arrow_down.gif";
            }
    }             
}

 

Thanks,

Mark

[lemmin]

Can you show the HTML for what you are using this on?

[pianoman993]

Yes but I have to warn you.. it's not pretty

 

<div class="profile_list">
    <ul>
        <li class="border">
        	<a href="#" onClick="toggle('about_me')">
            	<img height="12" width="12" style="border:0px;float:left;padding-right:5px;" id="arrow_about_me" src="<?=base_url()?>img/icons/arrow_down.gif" />
            </a>
            <a href="#" onClick="toggle('about_me')"><b>About Me</b></a>
            <div id="about_me" style="margin-left:10px;margin:5px 10px 5px 15px;">
            	<?=form_open('profile/modifyprofile/'.$this->uri->segment(3))?>
                <textarea class="textarea" name="field_data" ><?=$field_about_me?></textarea><br />
                <input type="hidden" name="field_name" value="about me" />
            	<input type="submit" name="modify" value="Modify" style="font-size:11px;border:1px solid #CCC;margin-top:5px;" />
                </form>
            </div>
        </li>
        
        <li class="border">
        	<a href="#" onClick="toggle('contact_info')">
            	<img height="12" width="12" style="border:0px;float:left;padding-right:5px;" id="arrow_contact_info" src="<?=base_url()?>img/icons/arrow_down.gif" />
            </a>
            <a href="#" onClick="toggle('contact_info')"><b>Contact Information</b></a>
            <div id="contact_info" style="margin-left:10px;margin:5px 10px 5px 15px;">
            	<?=form_open('profile/modifyprofile/'.$this->uri->segment(3))?>
            	<textarea class="textarea" name="field_data" ><?=$field_contact_info?></textarea><br />
                <input type="hidden" name="field_name" value="contact information" />
            	<input type="submit" name="modify" value="Modify" style="font-size:11px;border:1px solid #CCC;margin-top:5px;" />
                </form>
            </div>
        </li>
        
        <li>
        	<a href="#" onClick="toggle('website')">
            	<img height="12" width="12" style="border:0px;float:left;padding-right:5px;" id="arrow_website" src="<?=base_url()?>img/icons/arrow_down.gif" />
            </a>
            <a href="#" onClick="toggle('website')"><b>Website</b></a>
            <div id="website" style="margin-left:10px;margin:5px 10px 5px 15px;">
            	<?=form_open('profile/modifyprofile/'.$this->uri->segment(3))?>
            	<input type="text" class="textfield" name="field_data" value="<?=$field_website?>" /><br />
                <input type="hidden" name="field_name" value="website" />
            	<input type="submit" name="modify" value="Modify" style="font-size:11px;border:1px solid #CCC;margin-top:5px;" />
                </form>
            </div>
        </li>        
    </ul>
    </div>
    
</div>

<script>
toggle('about_me');
toggle('contact_info');
toggle('website');
</script>

[lemmin]

I don't see any code that would initially hide those divs at all. Do you have a custom css style for all divs? If not, try changing the div's style to this:

<div id="about_me" style="margin-left:10px;margin:5px 10px 5px 15px;display:none">

 

Also, in the toggle function, I would suggest setting the display back to the default instead of just '' and you are missing two semi-colons:

function toggle(id) {
    ul = id;
    img = "arrow_" + id;

    ulElement = document.getElementById(ul);
    imgElement = document.getElementById(img);

    if (ulElement){
            if (ulElement.style.display=='none'){
                ulElement.style.display='block';
                imgElement.src = "img/icons/arrow_top.gif";
            }else{
                ulElement.style.display='none';
                imgElement.src = "img/icons/arrow_down.gif";
            }
    }             
}