Show/Hide Div Help

Trebz · February 21st, 2006, 05:17 AM

Hi
Does anyone have a bit of code I could borrow that will not just toggle a div on & off, but also the link that does the deed?
I want to be able to have something like...
Hide HelpText
blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah
blah blah blah"
And then when you click "Hide HelpText" it becomes
Show Help Text

benbacardi · February 21st, 2006, 12:45 PM

Javascript:

Code:

function change() {

if (document.getElementById("showhide").style.display == "none") {

document.getElementById("showhide").style.display = "inline";

document.getElementById("thetext").innerHTML = "Hide Help Text";

} else {

document.getElementById("showhide").style.display = "none";

document.getElementById("thetext").innerHTML = "Show Help Text";

}

}

and the HTML:

HTML Code:

<a href="javascript:change();"><span id="thetext" style="display:inline">Show Help Text</span></a>

<div style="display:none" id="showhide">

blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah
blah blah blah

</div>

hope that helps!

Trebz · February 21st, 2006, 06:37 PM

Excellent!!!

Exactly what I needed

Thanks very much Ben, much appreciated :-D

paulyii · April 27th, 2009, 09:13 PM

This is wonderful !
and i have been searching around for it ..

The only problem though..
i am a GreenHorn in scripting, so i need lot of helps..

in this particuler script,
what shd i do, if there exist more than one Div i wanna "show/Hide" ??

i'd tried rename the Second Div, but .. when i clicked my " show Text"
both links were effected.

My page shd look like this :

1. Transport : [ Show Detail}

Code:

This is what we saw when clicked [show Detail]
* Taxi
* Bus
* Ship

2. Races [ Show Detail]

Code:

This is what we saw when clicked [show Detail]
* English
* Chinese
* Indian