show/hide text on a page

[Hitta]

How if at all can i show/hide text that is on a page, i have see a few show/hide text things on several webpages but i can not find any scripts and help about this anywere
Any help is welcomed
Thanks, Hitta

[Twey]

There are two ways of doing this: with the visibility property, or the display property. The difference is that visibility will cause the rest of the page to treat the elemet as if it's still there, while display will cause it to be removed from the page completely.

<p id="hidingtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tellus purus, dapibus non, accumsan a, viverra ac, nisl. Integer rutrum aliquet velit. Proin eu arcu et quam ultrices pretium. Ut libero massa, gravida quis, placerat convallis, iaculis et, massa. Donec id pede quis est egestas hendrerit. Sed laoreet lorem. Curabitur in elit a felis vehicula aliquam. Sed auctor nunc ut nisl. Nam sit amet nunc sit amet nisl pretium ornare. Integer et felis eget arcu sagittis accumsan. Donec semper nisi in est. Sed consequat. Morbi nec justo nec mi placerat mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec viverra quam et nulla. Maecenas id ante a tellus consequat feugiat. Quisque at lorem. Phasellus at pede non sem volutpat posuere.</p>
<input type="button" value="Show/Hide Text" onclick="
  var e = document.getElementById('hidingtext');
  if(e.style.visibility == 'hidden') e.style.visibility = 'visible';
  else e.style.visibility = 'hidden';
// Or, using the display property:
  //if(e.style.display == 'none') e.style.display = 'block'; // use 'inline' not 'block' for inline elements
  //else e.style.display = 'none';
">

[Hitta]

I sorted it heres what i did

<DIV id=HittasDiv style="display: none">Hello world
<A HREF=# onClick="javascript: HittasDiv.style.display='none'; OtherDiv.style.display='inline'">Hide the text</A>
</DIV>
<DIV id=OtherDiv>
<A HREF=# onclick="javascript: HittasDiv.style.display='inline'; OtherDiv.style.display='none'; ">Show the text</A>
</DIV>

[Twey]

There are a few problems with your code:
1) HTML attribute values must be enclosed in quotes ("). This doesn't have to apply for purely numerical values (such as 3, or 9, but not 5% or 20px).
2) javascript: pseudo-URIs have no business being inside event handlers. Event handlers are not HREFs.
3) Elements with IDs should be accessed with the W3C-standard document.getElementById() method.
4) Using "#" as an HREF and not returning false from the event handler will cause the page to scroll to the top every time the user clicks the links.

[Hitta]

Nope, all works fine on all OS and browsers

[Hitta]

yer i did find the href thing anoyingthough,how you get it to stay still on the page?

[Twey]

Nope, all works fine on all OS and browsers

Oh really? Am I to understand that you have obtained a copy of every single OS and browser to exist, have ever existed, or possibly exist in the future, and tested your page in each and every one of them? Wow, I'm impressed.

yer i did find the href thing anoyingthough,how you get it to stay still on the page?

Append the statement "return false;" to your onclick event.

[Hitta]

Oh really? Am I to understand that you have obtained a copy of every single OS and browser to exist, have ever existed, or possibly exist in the future, and tested your page in each and every one of them? Wow, I'm impressed.Append the statement "return false;" to your onclick event.

thanks and by ll OS and browsers i meant the most popular ones, SUSE linux fedora windows 2k xp, firefox netscape explorer :P

[mwinter]

Do things properly, and it will work in a great deal more. It will also prevent error messages appearing, which is almost always a sign of incompetence; not a nice image to send to visitors.

Mike

[Hitta]

What do you mean?