Develop Reference

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

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/bootstrap#4.6.0/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

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>

load li class active to bootstrap nav loaded dynamically to an html page

I have a bootstrap navbar loaded dynamically to an html page via script
<script>
$(function(){
$("#nav-placeholder").load("menu.html");
});
</script>
it loads perfect!, what I need now is to set the class="active"
this is my menu.html loaded into let's say our mision page
<div class="container navbar-fixed-top">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<img alt="Brand" src="media/35px_carinhands_logo2.png">
</a>
<button type="button" class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>our mision</li>
<li>services</li>
<li>why us</li>
<li>fees</li>
<li>faq</li>
<li>contact us</li>
</ul>
<div class="navbar-brand">
<a class="btn btn-social-icon btn-twitter" href="http://www.twitter.com" target="_blank"><span class="fa fa-twitter"></span></a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com" target="_blank"><span class="fa fa-facebook"></span></a>
<a class="btn btn-social-icon btn-instagram" href="http://www.instagram.com" target="_blank"><span class="fa fa-instagram"></span></a>
</div>
</div>
</nav>
what I want is when menu is loaded in "our.html" <li>our mision</li> li goes <li class="active">our mision</li>
this is what I've tried:
<!-- Navigation -->
<script>
$(function(){
$("#nav-placeholder").load("menu.html");
});
</script>
I add the place holder into body
<div id="nav-placeholder"></div>
then I try to call the class
<script>
$(document).ready(function(){
$(".navbar-default .navbar-nav > .active").find("li:nth-child(1)").addClass("active");
});</script>

I deleted my old answer and edit your code litle. I hope this help.
<!-- Navigation -->
<script>
$(function(){
$("#nav-placeholder").load("menu.html", function() {
//wait for ajax load n add active class
//$(".navbar-default .navbar-nav > .active").find("li:nth-child(1)").addClass("active");
$('a[href="' + decodeURIComponent(window.location.pathname.replace(/^\/|\/$/g, '')) + '"]').parent().addClass('active');
});
});
</script>

this is what worked out.
add this code in all page (changing the li child element number) or link the .js in the correct page
<!-- Navigation -->
<script>
$(function(){
$("#nav-placeholder").load("menu.html", function() {
$("ul.nav.navbar-nav").find("li:nth-child(1)").addClass("active");
});
});
</script>
thank you #Mustafa Çetin for that light in the sea

Jquery after click and load it copy and paste part of HTML

I am here with a good problem that I don't know how to fix it. I was putting some javascript inside my volt file and when I asked to click it works and load the page but the problem is that also copy and past part of my <head> files and part of my bootstrap navbar menu <nav>.
Bootstrap Menu code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav">
<li {% if view.url == '/' %}
class="active"
{% endif %}
><a class="navbar-brand" href="/">DaizCode</a></li>
</ul>
</div>
<?php
$this->view->url = $this->router->getRewriteUri();
?>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<?php if(isset($_SESSION['username']) == false) { ?>
<li {% if view.url == '/about' %}
class="active"
{% endif %}
>About Us
</li>
<li {% if view.url == 'auth/login' %}
class="active"
{% endif %}
>Login
</li>
<li {% if view.url == 'auth/register' %}
class="active"
{% endif %}
>Register
</li>
<?php } else { ?>
<li {% if view.url == '/auth/dashboard' %}
class="active"
{% endif %}
><img src="http://www.daizcode.com/img/activity-icon.png" />
</li>
<li {% if view.url == '/auth/dashboard/learn' %}
class="active"
{% endif %}
><img src="http://www.daizcode.com/img/learn-icon.png" />
</li>
<li {% if view.url == 'auth/dashboard/discussions' %}
class="active"
{% endif %}
><img src="http://www.daizcode.com/img/conv-icon.png" />
</li>
<li {% if view.url == 'auth/dashboard/notifications' %}
class="active"
{% endif %}
><img src="http://www.daizcode.com/img/globe-icon.png" />
</li>
<li {% if view.url == 'auth/dashboard/inbox' %}
class="active"
{% endif %}
><img src="http://www.daizcode.com/img/inbox-icon.png" />
</li>
<?php } ?>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
{{ content() }}
{{ content() }} is part of the volt template where it goes pick the other pages immediately to show it.
I have some PHP so I can show different menu after the user be on or not.
Here it is the nav file (nav.volt) code:
<input type="text" class="user-login" name="user-login" placeholder="Username..." />
<input type="password" class="password-login" name="pwd" placeholder="Password..." />
X
Here I let you my volt page (script part):
{{ javascript_include('/js/jquery-3.1.1.js') }}
{{ javascript_include('/js/jquery-3.1.1.min.js') }}
{{ javascript_include('/js/bootstrap.min.js') }}
<script type="text/javascript">
$(".login").click(function() {
$(".navbar-right").load("auth/login/nav");
return false;
});
</script>
Here I can show you the image where you see the inspect of the page, and it is inspecting after the click of class .login which is in bootstrap navbar. The code I want to show on it is there after the red rectangle.
What I want to know is how can I remove what's inside of the rectangle. See the image below.
Google Chrome Inspect of the problem I said above
Updated image problem
Thank you.

You can add this to fetch specific part of the file ,
This would load the input elements and a tag after input element with out loading nav or any other tags.
<script type="text/javascript">
$(".login").click(function() {
$(".navbar-right").load("auth/login/nav input,input+a");
return false;
});
</script>
Hope this helps

Changing Bootstrap Theme with Javascript

This should be pretty simple. I am trying to change bootstraps theme from default to a dark theme with the following code and javascript:
<link rel="stylesheet" href="/static/bootstrap.min.css">
<script src="/static/jquery.min.js"></script>
<script src="/static/bootstrap.min.js"></script>
<!-- Dynamic theme updates -->
<script>
var themes = {
"default": "",
"inverse" : "/static/darktheme.css"
}
function changeTheme(themeType) {
var themeurl = themes[themeType];
document.getElementById("mynavbar").className = "navbar navbar-" + themeType + " navbar-fixed-top";
var themeRef = document.getElementById("theme-ref")
themeRef.setAttribute("href", themeurl)
};
</script>
<link id="theme-ref" rel="stylesheet" href="">
And here is my navbar with the button to change it:
<div id="mynavbar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">
<img style="max-width: 70px;" src="static/me-logo.png">
C&T Tool
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
an item here
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><another item</li>
<li class="dropdown">
Theme<b class="caret"></b>
<ul class="dropdown-menu">
<li>Light</li>
<li>Dark</li>
</ul>
</li>
{% block navsubmit %}
{% endblock %}
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
It works but I have to click it twice to get it to work fully. The first click on inverse changes the font and some margins and the second click on inverse changes the colors and everything else. What could make this happen? I'm using this theme.

Bootstrap Collapse hide onClick

freedomcore.com/saverplaces.co.uk/NEW/
In the above site when click the Terms & Conditions or More information on this voucher links just below the Get Voucher button. You will see a div slide down below with the content.
I want it so that if you have clicked Terms & Conditions then go and click More information on this voucher it will hide the "Terms & Conditions" content so that both are not displayed at the same time.
My JavaScript isn't the best this is what I came up with but it does not work:
I have More information on this voucher link this class hide-terms-1 then I have this jQuery code:
$(document).ready(function(){
$(".hide-terms-1").click(function(){
$("#voucher-terms-1").hide();
});
});
This seems to be working kind of but once it is click you can not open it back up again.

HTML:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar menubutton" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="menu">Menu</span>
</a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-search"><img src="images/search_03.png">Search</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>About Us</li>
<li>Research & Innovation</li>
<li>Our Products</li>
<li>Responsibility</li>
<li class="subnav"><a href="#" >Careers</a></li>
<li class="subnav"><a href="#" >Newsroom</a></li>
<li class="subnav"><a href="#" >Contact Us</a></li>
<li class="navfoot">This is a mobile version of our website<br/>
View full site</li>
</ul>
</div><!--/.nav-collapse -->
<div class="nav-search collapse">
<div class="search_box">
<form action="" method="post">
<input type="text" value="Enter Search">Search
</form>
</div><!-- end search_box -->
</div><!--/.nav-search -->
</div>
</div>
</div>
JS:
$('.container a').click(function(){
var $target = $($(this).data('target'));
if(!$target.hasClass('in'))
$('.container .in').removeClass('in').height(0);
});
http://jsfiddle.net/gNUEx/
http://jsfiddle.net/mmfansler/fzbsp/

Let's try in this way:
$(document).ready(function(){
$(".hide-terms-1").click(function(){
$("#voucher-terms-1").collapse('hide');
});
});

This is much better I think
$(".navbar").find("[data-toggle=collapse]").click(function(e){
e.preventDefault();e.stopPropagation();
$(".navbar").find(".collapse.in").collapse("hide");
$($(this).attr("data-target")).collapse("show");
});