I need to change an image to another image onClick

[MisterMaster]

My code is below. I have a drop down accordian list. Whenever the text is clicked it shows the content under it, and when it is clicked again, the content goes away.

There's a "plus" sign next to the text that you click to expand the content. I need the "plus" sign to change to a "minus" sign when the content is expanded. Once the user clicks the content to make it go away, I need the "minus" sign to change back to a "plus" sign.

The plus sign turns to a minus sign, but once I click it again, it stays a minus sign. I need it to change back to a plus sign. Any ideas?


<script type="text/javascript">

function changeDropdownSymbol(){

var plusSign = document.getElementById("dropdownSymbol");

if (document.dropdownSymbol1.src = "images/plus.png"){
document.dropdownSymbol1.src = "images/minus.png";
}

else if (document.dropdownSymbol1.src = "images/minus.png"){
document.dropdownSymbol1.src = "images/plus.png";
}
}

</script>


<div class="menuheader expandable" onclick="changeDropdownSymbol()">

<img src="images/plus.png" align="left" id="dropdownSymbol" name="dropdownSymbol1" />

<div id="purpTxt">EXPANDABLE TEXT HEADER</div>

</div>

[MisterMaster]

Ignore that 2nd line of code:

"var plusSign = document.getElementById("dropdownSymbol"); "

I forgot to remove that

[MisterMaster]

All set I solved it.

[MisterMaster]

Here's the code if anyone else wants it:

var tggle='off'

function changeDropdownSymbol1(){
if (tggle=='on'){
document.dropdownSymbol1.src="images/plus.png"
tggle='off'}
else {
document.dropdownSymbol1.src="images/minus.png"
tggle='on'}
}



<div class="menuheader expandable" onclick="changeDropdownSymbol1()">

<img src="images/plus.png" align="left" id="dropdownSymbol" name="dropdownSymbol1" />

<div id="purpTxt">EXPANDABLE TEXT HEADER</div>

</div>