PDA

View Full Version : show and hide



abs0lut
08-17-2008, 12:09 PM
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
08-17-2008, 12:57 PM
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
08-17-2008, 11:16 PM
the input field should be placed where the text "This will hide" appears. please help..
thanks.

jscheuer1
08-17-2008, 11:25 PM
<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
08-18-2008, 12:45 AM
Haha. I was about to post the exact same question, then I got on and saw this. Thanks :)

abs0lut
08-21-2008, 05:48 AM
<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