How to use JavaScript to hide a text area

Question

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>

Solution 1

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

Solution 2

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.

Comments

[asim-ishaq]

what is the difference between ..style.display ="none" and ..style.visibility = "hidden". If we use display:none, would the textarea content be submitted when the form postback occurs?

[Mark Walters]

from what the OP has said he wants his Textarea hidden once it's value has changed not when the button is clicked again. I also prefer to use .style.display != "none" to show it incase the display property is not set == "".

[Mark Walters]

@asim-ishaq Your right with form posts display="none" will not post. In this instance using visibility = "hidden" is beneficial and the css position property can be set to absolute to achieve the same visual effect

[GautamD31]

He asked that "after he complete the message" So we can assume that he will click it....