show and hide

[abs0lut]

the user could only see the text "This will hide" and the show-hide link
When the user clicks the show-hide link, it will show an input field and it will hide the text "This will hide"
could you please help me?

[jscheuer1]

When showing and hiding things you have two basic approaches (there are other ways):

• The element's visibility style property (hidden or visible)
• The element's display style property (none or usually block or inline)

With display, the seen property varies depending upon the type of element (what display values it can support) and how you want it to display when it is seen.

Setting visibility hidden only removes the element from view. Setting display to none removes the element from the flow (layout) of the document, so can make things jump around as well as disappear.

You could do:

<span id=txt>This will hide</span> 
<a href="#" 
onclick="document.getElementById('txt').style.visibility='hidden';
document.getElementById('inp').style.visibility='visible';
return false;">Do it</a> 
<input style="visibility:hidden;" type="text" id="inp">

[abs0lut]

the input field should be placed where the text "This will hide" appears. please help..
thanks.

[jscheuer1]

<a href="#" 
onclick="document.getElementById('txt').style.display=!this.onclick.tog? 'none' : '';
document.getElementById('inp').style.display=!this.onclick.tog? '' : 'none';
this.onclick.tog = !this.onclick.tog;
return false;">Do It</a> 
<span id=txt>This will hide</span><input style="display:none;" type="text" id="inp">

I added a feature too. Can you guess what? Here's the bare bones version:

<a href="#" 
onclick="document.getElementById('txt').style.display='none';
document.getElementById('inp').style.display='';
return false;">Do It</a> 
<span id=txt>This will hide</span><input style="display:none;" type="text" id="inp">

[hosdank]

Haha. I was about to post the exact same question, then I got on and saw this. Thanks

[abs0lut]

<a href="#" 
onclick="document.getElementById('txt').style.display=!this.onclick.tog? 'none' : '';
document.getElementById('inp').style.display=!this.onclick.tog? '' : 'none';
this.onclick.tog = !this.onclick.tog;
return false;">Do It</a> 
<span id=txt>This will hide</span><input style="display:none;" type="text" id="inp">

I added a feature too. Can you guess what? Here's the bare bones version:

<a href="#" 
onclick="document.getElementById('txt').style.display='none';
document.getElementById('inp').style.display='';
return false;">Do It</a> 
<span id=txt>This will hide</span><input style="display:none;" type="text" id="inp">

thank you very much