setAttribute works in Safari, not in IE

Question

I've read many posts on this topic, but none fits my problem. On an onclick action on an img tag, I want several things to happen.

1. the image must change (+ to -, or visa versa);
2. set de alt for that img tag;
3. rewrite the onclick action to point to another function in the future.
4. hide (or unhide) a div (including contents ofcourse.

This works flawless in Safari (in using a Mac) but the application I'm writing (and will use this menu) will mostly be used on IE. Well, guess what, it doesn't work on IE.

I've build 2 functions, some css and offcourse HTML. Here are some snippets:

The javascript:

function changeDaSign(menuNumber) {

    if (menuNumber=='menu1') {
        document.getElementById("submenu1_sign").setAttribute("src","images/minus.gif");
        document.getElementById("submenu1_sign").setAttribute("alt","-");
        document.getElementById("submenu1_sign").setAttribute("onclick","changeDaSignBack('menu1')");
        document.getElementById("submenu1").setAttribute("class","submenu");
    }

function changeDaSignBack(menuNumber) {

if (menuNumber=='menu1') {
    document.getElementById("submenu1_sign").setAttribute("src","images/plus.gif");
    document.getElementById("submenu1_sign").setAttribute("alt","+");
    document.getElementById("submenu1_sign").setAttribute("onclick","changeDaSign('menu1')");
    document.getElementById("submenu1").setAttribute("class","hidden");
}

The css:

.hidden {
    display: none;
    color:#444;
}

ul.menu {
    margin-left:5px;
    color: #C00;
    list-style-type: none;
}

ul.submenu {
    margin-left: 10px;
    color: #C90;
    list-style-type: none;
} 

a.tobemade {
    font-style:normal;
    text-decoration: none;
    color: #C00;
}

div.submenu {
    border: #00F thin solid"
}

The HTML:

<ul class="menu">   
<li>
    <img id="submenu1_sign" src="images/plus.gif" alt="+" onclick="changeDaSign('menu1')"; return false; />
    <a href="#" class="tobemade" onclick="nav_other_div_to_other_content(arg_meegeven)"; return false;>Menu Item 1</a>

    <div class="hidden" id="submenu1">
    <ul class="submenu" id="submenu1">
        <li>
            <a href="#" class="tobemade" onclick="nav_other_div_to_other_content(arg_meegeven)"; return false;> submenu item 11 </a> 
        </li>
        <li>
            <a href="#" class="tobemade" onclick="nav_other_div_to_other_content(arg_meegeven)"; return false;> submenu item 12 </a>
        </li>
    </ul>
    </div>
</li></ul>

Suggestions to get this working in both IE and Safari please, as well as plastic surgery on the code.

Answer 1

You don't need two handlers. Just this:

HTML:

<ul class="menu">   
    <li>
        <img src="images/plus.gif" alt="+">
        <a href="#">Menu Item 1</a>    
        <ul class="hidden">
            <li>
                <a href="#">submenu item 11</a>
            </li>
            <li>
                <a href="#">submenu item 12</a>
            </li>
        </ul>
    </li>
</ul>

JavaScript:

img.onclick = function () {
    var submenu = this.parentNode.getElementsByTagName( 'ul' )[0];
    if ( this.alt === '+' ) {
        this.alt = '-';
        this.src = 'images/minus.gif';
        submenu.className = 'submenu';
    } else {
        this.alt = '+';
        this.src = 'images/plus.gif';
        submenu.className = 'hidden';
    }
};

Live demo: http://jsfiddle.net/nJZFK/1/

Answer 2

I resolved my own issue using a jQuery function like so:

    $(document).ready(function() {
  $("img").click(function() {

        var whichSubmenu ="div #"+$(this).get(0).id;
        var imgPlusOrMinus=new RegExp("plus");

        $(whichSubmenu).toggle();

        if (imgPlusOrMinus.test($(this).get(0).src) == true ) { 
            $(this).attr("src","images/minus.gif");
            $(this).attr("alt","-");
        } else {
            $(this).attr("src","images/plus.gif");
            $(this).attr("alt","-");
        }
  });
});

Bit more elegant. It did deliver me another puzzle though. Can anybody enlighten me why the following bits of code do and don't work?

This don't work in combination with jQuery function above:

<li>
    <img id="submenu1" src="images/plus.gif" alt="+"/>Menu Item 1
    <div  class="submenu" id="submenu1" >
        <ul class id="submenu1">
            <li>submenu item 11</li>
        </ul>
    </div>
</li>

In CSS file: 
       ul.submenu {
        list-style-type: none;
       }
       div.submenu {
        display: none;
       }

This does work in combination with jQuery function above:

<li>
    <img id="submenu1" src="images/plus.gif" alt="+"/>Menu Item 1
    <div   id="submenu1" >
        <ul class="submenu" id="submenu1">
            <li>submenu item 11</li>
        </ul>
    </div>
</li>

In CSS file:        
    ul.submenu {
        list-style-type: none;
        display: none;
    }

Seems to my I'm clearly stating in the var whichSubmenu that the DIV must be toggled.

Additional info I wan't the submenu items to be hidden by default and shown after a click.

Answer 3

Arrggghhhh....

Got it working perfectly now. Problem was ... a space between div en # in the var declaration. This caused the script not to address the div#someId but div #someId, which is the first div and every #someId. BooHoooo...

Here the working script:

--------- jQuery: ----------
$(document).ready(function() {
  $("img").click(function() {
var whichSubmenu ="div#"+$(this).get(0).id;
var imgPlusOrMinus=new RegExp("plus");
        $(whichSubmenu).toggle();   
    if (imgPlusOrMinus.test($(this).get(0).src) == true ) { 
            $(this).attr("src","images/minus.gif");
            $(this).attr("alt","-");
    } else {
        $(this).attr("src","images/plus.gif");
        $(this).attr("alt","-");
    }
 });
});

--------- HTML: ------------
<div>
<ul class="menu">   
<li>
        <img id="submenu1" src="images/plus.gif" alt="+"/><a href="#" class="tobemade" return false;>Menu Item 1</a>
        <div class="submenu" id="submenu1" >
                <ul class="submenu">
                <li><a href="…> submenu item 11 </a> </li>
                <li><a href="...> submenu item 12 </a> </li>
                </ul>
        </div>
</li>
</ul>   
</div>

------- CSS: ---------
ul.submenu {
    list-style-type: none;
} 

div.submenu {
    display: none;  
}