Bootstrap navbar, new dropdown does not close already opened dropdowns in mobile view

Question

I'm having issues with navbar in mobile view. When clicking on a new dropdown while one (or more) dropdowns are already opened, it adds on top of the old one instead of closing any already open dropdowns.

What I would like is whenever a dropdown is clicked while another one is already opened, it will close any previous dropdowns and open the new one only.

Image of the issue. Here I've clicked on two navbar, the newly clicked one (Sofiety Members) simply adds on top of the old dropdown (Your Feeds):

Note: Clicking on any of the dropdowns again closes that specific dropdown.

In regular view (desktop view), clicking on a new dropdown closes any old ones, just as I want it.

Built in Volt on Phalcon 3.5.

jQuery: https://code.jquery.com/jquery-3.6.0.min.js

Bootstrap: https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js

Html: (Sorry for the long html! :x)

<nav class="navbar navbar-inverse navbar-inverse navbar-fixed-top" role="navigation" style="padding-top: 0px;">

    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle mobile-btn-background" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse-1">
                <div class="auth-buttons">
                    {% if auth_user is not empty %}
                    {{image(auth_user.profilepicture(), 'class':'user-image-navbar', 'style':'width: 35px; height: 35px; border-radius: 55%;') }}
                    {% else %}
                    <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></div>
                    {% endif %}
            </button>

            {% if auth_user is empty %}
              {{ link_to("session/index", "<span class='auth-buttons white-text'><strong>Sign Up / In</strong></span>", "class":"navbar-toggle mobile-btn-background") }}
              {{ link_to("about/index", "<span class='auth-buttons white-text'><strong>Learn More!</strong></span>", "class":"navbar-toggle mobile-btn-background") }}
            {% else %}

<div class="button-group">

<button type="button" class="navbar-toggle mobile-btn-background" data-toggle="collapse" data-target="#bs-navbar-collapse-4">

<span id="notifications_mobile" class="glyphicon glyphicon-globe" aria-hidden="true" font-size: "15px;"></span> <span class="badge" id="note_counter_mobile" font-size: 11px; margin-top: -8px;"></span>
</button>

{{ link_to("authed/conversation/index", "
<button class='navbar-toggle mobile-btn-background' type='button''>
  <span id='envelope_mobile' class='glyphicon glyphicon-envelope' aria-hidden='true' style='font-size: 15px;'></span> <span id='conv_counter_mobile' class='badge' style='font-size: 11px; margin-top: -8px;'></span></button>
  ") }}

<button type="button" class="navbar-toggle mobile-btn-background" data-toggle="collapse" data-target="#bs-navbar-collapse-5">
  <span class='glyphicon glyphicon-user' aria-hidden='true' style='color: lightgreen;'></span>
</button>

{# EVENTS #}
<button type="button" class="navbar-toggle mobile-btn-background" data-toggle="collapse" data-target="#bs-navbar-collapse-3">
  <span class='glyphicon glyphicon-map-marker' aria-hidden='true' style='color: lightgreen;'></span>
</button>

{# YOUR FEEDS #}
<button type="button" class="navbar-toggle mobile-btn-background" data-toggle="collapse" data-target="#bs-navbar-collapse-2">
  <span class='glyphicon glyphicon-home' aria-hidden='true' style='color: lightgreen;'></span>
</button>

  </div>


            {% endif %}

            {% if auth_user is empty %}
                {% set link = "session/index" %}
            {% else %}
                {% set link = "authed/profile/main" %}
            {% endif %}
            {{ link_to(link, image('images/logo/logo.png', 'class': 'navbar-logo')) }}
        </div>

        <nav class="collapse navbar-collapse bs-navbar-collapse-1" role="navigation">
            {{ elements.getMenu(auth_user) }}
        </nav>




          <span class="visible-xs">

            
          <nav class="collapse navbar-collapse bs-navbar-collapse-2" id="bs-navbar-collapse-2">
              <div class="nav-collapse">
                  <ul class="nav navbar-nav navbar-left" style="padding-left: 8px;">
                    <li class='white-text'><strong><center>Your Feeds</center></strong></li>
                    {{ link_to("authed/statuses/feed", "
                    <li class='white-text'>
                        <span class='glyphicon glyphicon-home' style='color: lightgreen;' aria-hidden='true'></span> Home Feed
                    </li>
                    ") }}
                    {% if auth_user.profile.city is not empty %}
                      {% set localfeed = auth_user.profile.city ~ " Feed" %}
                    {% else %}
                      {% set localfeed = "LocalCity feed" %}
                    {% endif %}

                    {{ link_to("authed/statuses/localfeed", "
                    <li class='white-text'>
                        <span class='glyphicon glyphicon-tree-deciduous' style='color: lightgreen;' aria-hidden='true'></span> " ~ localfeed ~ "
                    </li>
                    ") }}
  
                </ul>
            </div>
        </nav><!-- /.navbar-collapse -->

          <nav class="collapse navbar-collapse bs-navbar-collapse-3" id="bs-navbar-collapse-3">
              <div class="nav-collapse">
                  <ul class="nav navbar-nav navbar-left" style="padding-left: 8px;">
                    <li class='white-text'><center><strong>Chillouts </strong></center></li>
                  {#<strong>Chillout</strong>#}
                    {{ link_to("authed/chillout/index", "
                    <li class='white-text'>
                        <span class='glyphicon glyphicon-map-marker' style='color: lightgreen;' aria-hidden='true'></span> <strong>Overview</strong>
                    </li>
                    ") }}

                    {{ link_to("authed/chillout/find", "
                    <li class='white-text'>
                        <span class='glyphicon glyphicon glyphicon-share' style='color: lightgreen;' aria-hidden='true'></span> <strong>Find</strong>
                    </li>
                    ") }}

                    {{ link_to("authed/chillout/new", "
                    <li class='white-text'>
                        <span class='glyphicon glyphicon-check' style='color: lightgreen;' aria-hidden='true'></span> <strong>Create</strong>
                    </li>
                    ") }}

                    <br>

                    {{ link_to("authed/chillout/past", "
                    <li class='white-text'>
                        <span class='glyphicon glyphicon-edit' style='color: lightgreen;' aria-hidden='true'></span> Chillouts as Host
                    </li>
                    ") }}

                    {{ link_to("authed/chillout/past", "
                    <li class='white-text'>
                        <span class='glyphicon glyphicon-ok-circle' style='color: lightgreen;' aria-hidden='true'></span> Past Chillouts
                    </li>
                    ") }}


                    <li class="divider"><hr></li>
                    <li class='white-text'><center><strong>Sociefy</strong></center></li>
                    {{ link_to("authed/sociefy/index", "
                    <li class='white-text'>
                        <span class='glyphicon glyphicon-heart' style='color: lightgreen;' aria-hidden='true'></span> Match and recommendations
                    </li>
                    ") }}     

                </ul>
            </div>
        </nav><!-- /.navbar-collapse -->

          <nav class="collapse navbar-collapse bs-navbar-collapse-4" id="bs-navbar-collapse-4">
              <div class="nav-collapse">
                  <ul id="notifications_content_mobile" class="nav navbar-nav navbar-left">

                </ul>
            </div>
        </nav><!-- /.navbar-collapse -->

          <nav class="collapse navbar-collapse bs-navbar-collapse-5" id="bs-navbar-collapse-5">
              <div class="nav-collapse">
                  <ul class="nav navbar-nav navbar-left" style="padding-left: 8px;">
                    <li class='white-text'><strong><center>Sofiety Members</center></strong></li>

                    {{ link_to("authed/invite/index", "
                    <li class='white-text'>
                        <span class='glyphicon glyphicon glyphicon-heart' style='color: lightgreen;' aria-hidden='true'></span> Invite somone to Sofiety
                    </li>
                    ") }}

                    {{ link_to("authed/search/index", "
                    <li class='white-text'>
                        <span class='glyphicon glyphicon-user' style='color: lightgreen;' aria-hidden='true'></span> Search Members
                    </li>
                    ") }}

                </ul>
            </div>
        </nav><!-- /.navbar-collapse -->

        </span>



  </div>
</nav>

Any help is GREATLY appriciated, I've been trying to fix this for days but I can't figure out how.

Thank you!!!

Best Regards, J

Answer 1

Fixed it, here is the answer for anyone finding this question. The commented part is if you want no animation.

<script>
    $(document).on('click','.navbar-toggle',function(e) {
            // NO ANIMATION SOLUTION
            //$(".navbar-collapse").stop().css({ 'height': '1px' }).removeClass('in').addClass("collapse");
            //$(".navbar-toggle").stop().removeClass('collapsed');

            // ANIMATION SOLUTION
            $('.navbar-collapse').collapse('hide');
    });
</script>