hide and show html parts

[ted_chou12]

I am just looking for how to hide and show html parts, something like this:
[code]
function show_hide(the_layer)
{
  if(document.getElementById(the_layer))
  {
    if(document.getElementById(the_layer).style.display == 'none')
    {
      document.getElementById(the_layer).style.display = 'inline';
    }
    else
    {
      document.getElementById(the_layer).style.display = 'none';
    }
  }
}
[/code]
[code]
<div id="foobar">Some text to be hidden or displayed.</div>
<br /><a href="javascript:show_hide('foobar');">Show/hide</a>[/code]
However, instead of hide at the first place, this codes shows it first and hide after you press the link, i tried reversing it, but it doesnt work, can anyone help me with this?
Thanks
Ted

[tomfmason]

Well first you should understand that if you use display, the  div will not take any space on the page until the display is set to block. You can also use visibility.

Here is a simple example. Also, I see that you repeated document.getElementById(The_layer); several times.. Just do something like this next time.

[code]
function showHideDiv(id) {
    var div = document.getElementById(id);
    div.style.display = (div.style.display == 'block')? 'none' : 'block';
}
[/code]

As I said you can also use visibility.

Good Luck,
Tom

[ted_chou12]

nope. I cant get it to work, can you suggest me how should i put this?
Thanks
Ted

[fenway]

It's hard not to get a 3-line function to work... how do you mean?

[ted_chou12]

I dont know where to put my html in, i am not very experienced with javascript...
Ted

[janroald]

html
[code]
<div id="foobar" style="display:block;">Some text to be hidden or displayed.</div>
<br /><a href="javascript:show_hide('foobar','block');">Show/hide</a>
[/code]

js
[code]
function showHideDiv(id,style) {
    var element = document.getElementById(id);
    element.style.display = (element.style.display == style ? 'none' : 'block');
}
[/code]

This should cover your needs and get you started.
Remember to give the div a display:block or display:inline or else you will have an extra click to make things happen.

[ted_chou12]

I see, thanks
Ted