New bootstrap form to be displayed on click of a button

Question

I have a bootstrap button. When that button is clicked, I need to display a form or a text area just below the button.

If there were any components below the button before the button was clicked, then they should be moved below the new form/text area that is to be displayed.

Could you please guide me on how to implement this in bootstrap?

Answer 1

You can use Bootstrap 4 to achieve this.

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-
</button>

<div class="collapse" id="collapseExample">
  <form>
    <input type="text">
  </form>
</div>

Or you can use jQuery $( "#button" ).append( "<form>Your form</form>" );

Bootstrap also uses jQuery under the hood. Using the first option can toggle the form while the second one would keep adding the form.