CODEWITHSUNDEEP
html
chahra
chahra

Reputation: 105

Textarea appears when I click on a button

I am trying to make a textarea appear when I click on a button because I don't need it to be displayed by itself in my html page. I'm using something like:

<textarea cols = "50" rows = "20" name="text" id="text_id" class="form-control" style="resize:vertical" ></textarea>

But this is not resolving my problem.

Any idea how I can do that?

I actually have two textarea that display the content of existing files, and when I click on a button to show the content in one text area and then click on the second button to show the content of the second textarea, the first textarea becomes empty while I need to keep both contents in both textareas displayed at the same time! How can I do that too?

Upvotes: 1

Views: 6336

Answers (4)

Coolsugar
Coolsugar

Reputation: 170

This is the most compact way you can do this I can think of:

We are giving the Textarea a CSS property to stay hidden Display = 'none'. Once the button is clicked, it changes that css property to Display = 'block' to make it visible.

<textarea cols = "50" rows = "20" name="text" id="text_id" class="form-control" style="resize:vertical; display = 'none'"></textarea>
<button onclick = "document.getElementById('text_id').style.display = 'block'">

Upvotes: 0

omercikayse
omercikayse

Reputation: 21

<textarea cols = '50' rows = '20' name='text' id='text_id' class='form-control' style='resize:vertical; visibility:hidden'> </textarea>

<button onClick='document.getElementById("text_id").style.visibility = "visible" '> Click me !</button>

Upvotes: 0

Srijan Karki
Srijan Karki

Reputation: 1619

You can use simple javascript or even jquery. But for simple javascript u can do it like this: On script tag inside head section write:

 <script>
function myFunction() {
    document.getElementById("demo").innerHTML = "<textarea cols = '50' rows = '20' name='text' id='text_id' class='form-control' style='resize:vertical' ></textarea>";
}
</script>

On Body section :

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Click here</button>

Upvotes: 0

Frederik Spang
Frederik Spang

Reputation: 3454

If you're using jQuery already, you might do something like this:

<textarea cols="50" rows="20" name="text" id="text_id" class="form-control" style="resize:vertical;display:none"></textarea>
<button class="show_button">Show/hide textarea</button>
<script>$(".show_button").click(function(){$("#text_id").toggle()})</script>

This will toggle the textarea for showing

I'm just assuming you're using jQuery, since form-control is used with Bootstrap - That requires jQuery.

Upvotes: 2

Related Questions