showing/hiding text

[stubarny]

Hi everyone,

I’m trying to write code that will display no text (except a link) and then make text appear when a link is clicked. So far I’ve only managed to write code that loads a page with text and hides the text when a link is clicked. Does anyone know how to edit the code below to make it work as I wish?

Thanks,

Stu

In the header:

<script language="JavaScript1.1">

var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) { if (ie4) { return document.all[id]; } else { return document.getElementById(id); } }

function toggle(link, divId) { var lText = link.innerHTML; var d = getObject(divId);
if (lText == 'Show details') { link.innerHTML = 'Hide details'; d.style.display = 'block'; }
else { link.innerHTML = 'Show details'; d.style.display = 'none'; } }
</script>

In the body:

<a title="show/hide" alt='show/hide' id="exps112_link" href="javascript: void(0);" style="text-decoration: none;" onclick="toggle(this, 'exps132');">Hide details</a>

<div id="exps132" style="padding: 0px;" >

TEXT TO SHOW/HIDE GOES HERE

</div>

[sheephat]

Why not just change the color of the link text to match the background and add a a:hover to the css / style which makes the text change colour when hovered over?

[cahva]

Eh.. Does it not do as you wish allready? It does if I read right.. If you want to do it other way(first hidden, when clicked then show) just reverse the funtion to do the other way and set the initial style to none.

[reddrum]

I would do somthing like this to hide and show text

function hide(){
  var ref = document.getElementById("divId");
  ref.style.visibility = "hidden";
}
function show(){
  var ref = document.getElementById("divId");
  ref.style.visibility = "visible";
}

[rulian]

try this:

put this between your HEAD element, dont touch it unless it doesnt work

<script type="text/javascript" language="Javascript">

function TextPop(linkText, TextElement)
{
var el=document.getElementById(TextElement); 
var txt=document.getElementById(linkText); 
if (el.style.display !== "none")
{
/// code to hide
el.style.display="none"; 
txt.innerHTML="Show Details"; 
}
else
{
/// code to show
el.style.display=""; 
txt.innerHTML="HideDetails"; 
}

}
</script>



put into your body:


<a title="show/hide" alt='show/hide' id="exps112_link" href="javascript: void(0);" style="text-decoration: none;" onclick="TextPop('linktext', 'exps132');"><span id="linktext">Hide details</span></a>

<div id="exps132" style="padding: 0px;" >

TEXT TO SHOW/HIDE GOES HERE

</div>