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/