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>

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>

• javascript
• html
• css

Share Improve this question Follow edited Feb 14, 2012 at 16:11 j08691 208k3232 gold badges269269 silver badges280280 bronze badges asked Feb 14, 2012 at 15:59 Suzi LarsenSuzi Larsen 1,50055 gold badges1818 silver badges3232 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Next time try to post your code in jsfiddle there are some issues with your code, first is better to put event handlers rather than put the javascript code in the href property, is easier to use a variable to save the state of the toggle button. Works almost 99% of the times if you show your elements with inline rather than block

var textHidden = true;
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(textHidden) {
    ele.style.display = "inline";
    text.innerHTML = "Show";
    textHidden = false

}
else {
    textHidden = true
    ele.style.display = "none";
    text.innerHTML = "Hide";

}
}​

html:

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

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();">