<input type="text" value="Text box"/>
<input type="button" onclick="toggle();"/>
How do I make the text box disappear and reappear with JavaScript?
Add a comment
|
3 Answers
JavaScript:
function toggle() {
var element=document.getElementById('element1');
if ( element.style.display!='none' ) {
element.style.display='none';
} else {
element.style.display='';
}
}
HTML:
<input id="element1" type="text" value="Text box"/>
<input type="button" onclick="toggle();"/>
4 Comments
Gabriel L. Oliveira
How did you put this code on stackoverflow's editor? It didn't let me put "input" tags on my responde, even beginning with a '>' char.
Anonymous the Great
Thanks, and I don't know why, it didn't show your posts. That is why I "bumped". :\
Gert Grenander
@Gabriel - You need to mark up your code and click the code button in the editor.
Matthew Lock
Is there a difference out of interest between display='' and display='block' ?
put this code on page:
<script>
function toogle(id) {
if (document.getElementById(id).style.visibility = 'hidden') {
document.getElementById(id).style.visibility = 'visible';
} else {
document.getElementById(id).style.visibility = 'hidden'
}
}
</script>
Now, just give a "id" element to your input tag, and pass this 'id' to the call of the javascript function on your button. Something like:
<input id="element1" type="text" value="Text box"/>
<input type="button" onclick="toggle('element1');"/>
answered Jun 10, 2010 at 2:16
Gabriel L. Oliveira
4,1226 gold badges34 silver badges40 bronze badges
1 Comment
Anonymous the Great
Thanks, and I don't know why, it didn't show your posts. That is why I "bumped". :\
JQuery provides some nice built-in functionality for this:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function toggle() {
$('#element1').toggle();
}
</script>
