Icons to show/hide a div

[Saphigon]

Hello!
Not sure if I should post this in one of the other sub-forums, I apologize in advance if so.

I am having an icon which function is to show/hide a div. It works fine, but I do want the icon to change to a different icon when clicked, so it is one icon to show the div, and a different icon to hide the div.

Here is the code:

 function hide_menu(id){
    document.getElementById(id).style.display = "none";
}
function show_menu(id){
    document.getElementById(id).style.display = "block";
}

and the html:

<div id="infotekst">
<input type="image" src="info_kvit3.png" width="35" height="35" 
onclick="if (document.getElementById('idOfDiv').style.display=='none') 
show_menu('idOfDiv'); else hide_menu('idOfDiv');"></button>
</div>

Thanks,
Saphigon

[MarPlo]

Hi,
Try change your code with this one:

<div id="infotekst">
<input type="image" src="info_kvit3.png" width="35" height="35" 
onclick="if(document.getElementById('idOfDiv').style.display=='none') { this.src='other_img.png';
show_menu('idOfDiv'); } else { this.src='info_kvit3.png'; hide_menu('idOfDiv'); }"></button>
</div>

- Replace "other_img.png" with the path of your image.

[Saphigon]

Thank you for reply, it works almost perfectly.
The issue is that the icon does not change at first click, but at the second.
It is the wrong icon that appears to begin with; the one to show the div, even though the div is shown to start with.
I guess that is the reason, but I do not really know how to fix it. Also, I would like the div to start out hidden.


Thanks!