Bootstrap navbar hamburger is opening but not closing

On a phone sized screen, when I click the hamburger once, the navbar opens fine. When I try to close it, nothing happens - it's stuck. Where have I gone wrong? Here's my html:

<header class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button 
              type="button" 
              class="navbar-toggle collapsed" 
              data-toggle="collapse" 
              data-target="#teams-navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            
            <a class="navbar-brand" href="http://{{base_url}}">My Teams</a>
        </div>
        
        <nav class="collapse navbar-collapse" id="teams-navbar-collapse">
            <ul class="nav navbar-nav">
                {% if user.is_authenticated %}
                <li>
                    <a href="{% url 'profile_page' user.pk %}">My Profile</a>
                </li>
                
                <li>
                    <a href="{% url 'logout' %}">Logout</a>
                </li>
            </ul>
            {% else %}
            {% block login_button %}{% endblock %}
            {% endif %}
        </nav>
    </div>
</header>

I would say this is actually an issue with jQuery Toggle. Please ensure jquery is set to toggle "collapsed". One of the ways bootstrap works is by adding/removing classes to buttons/divs/html elements to display them based on css. For example. Pretty Select dropdowns work by adding "open" to a specific div before or after the select button. Hense you can use jQuery to toggle that open when it's clicked. I hope this helps.

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#teams-navbar-collapse">

<script type="text/javascript">
$( document ).ready(function() {
    $("button.navbar-toggle").click(function(){
        $("button.navbar-toggle").toggleClass("collapse");
    });
});
</script>