Hide/Show form on button click in Flask

Question

I was learning to create a wtf Flask web form which was:

class Update(FlaskForm):
    username = StringField('Username', validators=[DataRequired()])
    email = StringField('Email', validators=[DataRequired(), Email()])
    pic = FileField('Update Profile Pic', validators=[FileAllowed(['jpg','png'])])
    submit = SubmitField('Update')

What I wanted to do was that the form would load on the same page on a button click without making a seperate html page for the form. How can it be done either by using Flask or HTML? If any changes to route have to be made, please mention that as well.

HTML Code:

<div class="content-section">
            <form method="POST" action="" enctype="multipart/form-data">
                {{ form.hidden_tag() }}
                <fieldset class="form-group">
                    <legend class="border-bottom mb-4">Account Info</legend>
                    <div class="form-group">
                        {{ form.username.label(class="form-control-label") }}

                        {% if form.username.errors %}
                        {{ form.username(class="form-control form-control-lg is-invalid") }}
                        <div class="invalid-feedback">
                            {% for error in form.username.errors %}
                            <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                        {% else %}
                        {{ form.username(class="form-control form-control-lg") }}
                        {% endif %}
                    </div>
                    <div class="form-group">
                        {{ form.email.label(class="form-control-label") }}
                        {% if form.email.errors %}
                        {{ form.email(class="form-control form-control-lg is-invalid") }}
                        <div class="invalid-feedback">
                            {% for error in form.email.errors %}
                            <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                        {% else %}
                        {{ form.email(class="form-control form-control-lg") }}
                        {% endif %}
                    </div>
                    <div class="form-group">
                        {{ form.pic.label() }}
                        {{ form.pic(class="form-control-file") }}
                        {% if form.pic.errors %}
                        {% for error in form.picture.errors %}
                        <span class="text-danger">{{error}}</span><br>
                        {% endfor %}
                        {% endif %}
                    </div>
                </fieldset>
                <div class="form-group">
                    {{ form.submit(class="btn btn-outline-info") }}
                </div>
            </form>

Answer 1

You can load your form normally, and set it's visibility to hidden. If someone clicks on the button, just change visibility of a form to visible.

Example below:

function toggle_display(){
  el = document.querySelector('.content_section');
  
  if(el.style.visibility == 'hidden'){
      el.style.visibility = 'visible'
  }else{
     el.style.visibility = 'hidden'
  }
}

<button onclick="toggle_display()">Toggle display</button>

<div class="content_section">See me no more</div>

EDIT:

One more thing to mention, visibility property when set to hidden takes up space, even if it's hidden. To completly remove space that form will take and hide form, set display property to none. To show it again, set display to block.