Question

I am currently using the below text as a simple way of hiding and displaying my text. What I was trying to do though also was use the css to display the a tag with a background image:

one to have a plus symbol for when the text is hidden.

Then one to have a minus symbol for when the text is displayed and you want to hide the text again.

---

JavaScript:

function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "Show";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Hide";    
    }
} 

HTML:

<a id="displayText" href="javascript:toggle();">Show Further Details & Specification</a>
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

Answer 1

You need to set up the CSS for “displayText” to give it a background.

Something like this:

#displayText {
    display:block;
    height:20px;
    padding-left:30px;
    background-image:url(../images/plus.png);
}

Then swap the image for the alternate state:

#displayText.active {
    background-image:url(../images/minus.png);
}

So in your code you’ll need to add/remove the “active” class name on displayText based on the toggle state.

P.S. It’s considered bad form to used “href” for JS events. It’s better to use onclick.

<a id="displayText" href="javascript://"  onclick="toggle();">