Jquery toggle duration doesn't seem to work

Question

I know practically nothing about front end work besides just the basics. In my website that I am building I am trying something very simple and it doesn't seem to be working. I have a form that I only want to be displayed once a button is clicked. I was able to figure it out with using jquery but for whatever reason the toggle duration doesn't seem to be working. All of my google and reading of the docs seems to me as if it should be working. It seems to be the default toggle speed no matter what I try and change, I have tried just .toggle(), .toggle('slow'), .toggle("slow"), .toggle("fast"), .toggle(insert any number here) and the speed always remains what appears to be default: 400. Originally I have the form hidden by setting display to none; in the css file if that matters as well. What am I doing wrong? Any help would be greatly appreciated!

part of the html on the page

    <div class="container w-25 mb-5">
        <div class="container-fluid" id="wrapper">
            <form method="POST" id='form1'>
                {% csrf_token %}
                {% for field in form %}
                <div class="form-group px-3 my-3 {% if field.errors %}invalid{% endif %}">
                {{ field.label_tag }}
                {{ field }}
                {{ field.help_text }}
                {{ field.errors }}
                </div>
                {% endfor %}
                <button type="submit" class="btn btn-primary ml-3">Submit</button>
            </form>
        </div>
    </div>
    

</div>
{% endblock %}

{% block extra_scripts %}
<script type="text/javascript">
$( document ).ready( function() {
    $( "#review" ).click( function() {
        $( "#form1" ).toggle("slow");
    });
});
</script>
{% endblock %}

Answer 1

Take a look at this snippet and see if it helps. I'm not sure if it's anything you haven't tried, but it works. It's set to an unbearably long duration just for demo purposes.

 $( document ).ready( function() { $( "#review" ).click( function() { $( "#form1" ).toggle(6000); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container w-25 mb-5"> <div class="container-fluid" id="wrapper"> <form method="POST" id='form1'> <div class="form-group px-3 my-3 {% if field.errors %}invalid{% endif %}"> Here is some demo info for demonstration </div> <button type="submit" class="btn btn-primary ml-3">Submit</button> </form> </div> </div> <button id='review'>Review</button>