Reputation: 107
When I Click on the button a textarea appear allowing the user to type the message. After they type a message I want textarea to hide.
Can any one help me how to hide the textarea after entering the message?
This my Javascipt code:
<script>
function showDiv1() {
document.getElementById('welcomeDiv1').style.display = "block";
}
</script>
This my html code:
<div> <span style="display: inline-block;text-align: center; margin:-73px 0px -10px 61px; "><a href ="#"><img src="/wp-content/uploads/2013/03/reject_5.jpg" width="60" height="60" style="margin:0px 0px 0px 0px" value="Show Div" onclick="showDiv()"/></a><br />Decline</span></div>
<textarea id="welcomeDiv" style=" display:none; border:1px solid #666666; height:70px; margin:16px 0 0 8px " class="answer_list" title="Message to Employer" onFocus="this.value=''" > Message to Employer </textarea>
Upvotes: 3
Views: 41460
Reputation: 521
Replace visibility:hidden
with display: none
:
<textarea name="txtReason" id="txtReason" style="display: none;" class="textboxmulti">
</textarea>
and then show it by setting it to block:
this.form['txtReason'].style.display = 'block';
Additionally, you may want to look at jQuery which makes these kind of things extremely easy.
Upvotes: 1
Reputation: 5676
What about setting the display to "none" after the user changed the input of the textarea. You may have a look at http://jsfiddle.net/PnfLS/
document.getElementById("textbox").addEventListener("change", function(){
document.getElementById("textbox").style.display = "none";
});
Upvotes: 0
Reputation: 28773
Try like this
<script>
function showDiv1() {
var my_disply = document.getElementById('welcomeDiv1').style.display;
if(my_disply == "block")
document.getElementById('welcomeDiv1').style.display = "none";
else
document.getElementById('welcomeDiv1').style.display = "block";
}
</script>
It is the simple way of toggling the div using only one function,Ofcourse in JQuery there is only one thing you can do is 'toggle' the div
Upvotes: 10
Reputation: 12400
run this function on the onchange
event of the textarea
function hideMe(){
document.getElementById('welcomeDiv1').style.display = "none";
}
This completely removes the textarea so that it is hidden and also takes up no space on the page. If you want to hide it but for the space the textarea takes up to remain use .style.visibility = 'hidden'
instead
Upvotes: 0
Reputation: 10573
Try this:
document.getElementById('welcomeDiv1').style.visibility = "hidden";
Upvotes: 0