Modify text.innerHTML to an image in show/hide script

Question

I recently got this simple script to show/hide several sections of an html page. I'm using it to show/hide the content of a div by clicking small "+" and "-":

    function toggle1() {
    var ele = document.getElementById("toggleText1");
    var text = document.getElementById("displayText1");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "+";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "-";
    }
}

Along with:

<a href="javascript:toggle1();" class="txt_side_table_cmd" id="displayText1><img src="imgs/up.gif" /></a>
<div id="toggleText1" style="display: block">Content here</div>

The code works fine but i'm trying to change the "+" and "-" text links to images links. I have very little knowlege of Javascript and I tried various modifications that made it worst. This original script in in an extrenal .js file.

Any ideas as how to change text links to image links ?

Thank you very much

Duplicate of http://stackoverflow.com/questions/11722400 you can find solution here. — Manwal, Oct 25 '13 at 17:44

score 1 · Answer 1 · answered Oct 25 '13 at 17:55

Your id value is not close properly. Because of that document.getElementById("displayText1") is undefined. so try this

<a href="javascript:toggle1();" class="txt_side_table_cmd" id="displayText1">

instead of your

<a href="javascript:toggle1();" class="txt_side_table_cmd" id="displayText1>

Hope this helps...

score 0 · Accepted Answer · edited May 23 '17 at 12:31

If I'm understanding correctly, you could make your image links in advance, then just append them to the element where the '+' and '-' were before:

var showControlImage = new Image(),
    hideControlImage = new Image();

showControlImage.src = "path/to/showImage.png";
hideControlImage.src = "path/to/hideImage.png";

// Then just use your toggle function with minor changes:
function toggle1() {
    var ele = document.getElementById("toggleText1");
    var text = document.getElementById("displayText1");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "";
        text.appendChild = showControlImage;
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "";
        text.appendChild = hideControlImage;
    }
}

Also, you should clean up your tag as per Chandan's suggestion.

Modify text.innerHTML to an image in show/hide script

2 Answers2