We Keep Coding

data-toggle="tab" and data-toggle ="collapse" is not working

I am trying to display the content of the selected side navigation item, but somehow my data-toggle ="tab" is not working. I have searched it on several forums, made changes accordingly but still could not get it to work. As was suggested, I included the jquery link before the bootstrap link and I am using Bootstrap v3.3.7 (http://getbootstrap.com).
script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"
The part of the code is as follows:
<script>
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
<div class="container">
<div class="row">
<div class="wrapper">
<nav id="sidebar">
<div class="sidebar-header">
<li>Events<span class="caret"></span>
<ul class="collapse list-unstyled" id="eventSubmenu">
<li > Link1 </li>
<li > Link2 </li>
</ul>
</li>
As you can see in the image the data-toggle does not change its color, in short it is not considered as a keyword

JS causing links in navbar list elements to not work, how can i fix it?

I am making a website with a free template and i dont know JS really well. So i made a research and figured JS causing the problem.
So here is the relevant HTML and JS codes:
var clickMenu = function() {
$('#navbar a:not([class="external"])').click(function(event) {
var section = $(this).data('nav-section'),
navbar = $('#navbar');
if ($('[data-section="' + section + '"]').length) {
$('html, body').animate({
scrollTop: $('[data-section="' + section + '"]').offset().top - 55
}, 500);
}
if (navbar.is(':visible')) {
navbar.removeClass('in');
navbar.attr('aria-expanded', 'false');
$('.js-fh5co-nav-toggle').removeClass('active');
}
event.preventDefault();
return false;
});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<!-- Mobile Toggle Menu Button -->
<i></i>
<a class="navbar-brand" href="index.html"><span>X</span>XXX XXXX</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><span>Home</span></li>
<li><span>About</span></li>
<li><span>Services</span></li>
<li><span>Contact</span></li>
</ul>
</div>
</div>
</nav>

At the bottom of the function, the return false; statement is triggering on every link; regardless of whether it's an in page anchor, or linking to another page. This will prevent the browser from jumping to other pages.
I've changed your (relevant) code around some, and posted some new jQuery (with comments):
The target was removed from data-nav-section, and placed directly into the href. This reduces some superfluous code, as well as makes it so these will function on browsers without script support. Instead of a nice scroll, they will simply jump. But - since the JS is being used to stop the browser's functionality - browsers with script support will function fine.
I am using rel="external" instead of 'class="external", becauseclassis only useful to CSS;rel` can be used just as easily by CSS, but can also be interpreted by automated systems (like bots and search engines).
I've also replaced the class="active", with aria-current="page". Again, CSS works with both equally well, but aria-current="" works with accessible systems (i.e. screen readers).
NOTE: I am unsure what the if (navbar.is(':visible')) {... code block is for, so I have left it out of my example for now.
$('document').ready(() => {
$('#navbar a:not([rel="external"])').on('click', function(event) {
// Assign target element to the variable targetElement.
let targetElement = $("#" + $(this).attr('href').split('#')[1]);
// If the target element exists, it will have a length. If it doesn't exist, the browser will do its own thing.
if (targetElement.length) {
// Scroll browser window to the top of the element (-55px)
$('html, body').animate({
scrollTop: targetElement.offset().top - 55
}, 500);
// End funtion processing, and prevent the browser from performing any more actions.
return false;
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<!-- Mobile Toggle Menu Button -->
<i></i>
<a class="navbar-brand" href="index.html"><span>X</span>XXX XXXX</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li aria-current="page"><span>Home</span></li>
<li><span>About</span></li>
<li><span>Services</span></li>
<li><span>Contact</span></li>
</ul>
</div>
<div id="about" style="height: 200px; width=900px; background-color: #0F0;">
<h2>About</h2>
</div>
<div id="services" style="height: 200px; width=900px; background-color: #00F;">
<h2>Services</h2>
</div>
<div id="contact" style="height: 200px; width=900px; background-color: #F00;">
<h2>Contact</h2>
</div>
</div>
</nav>

Scrolltop animation not working

I am using this js to scroll to the id of the page. I took it from w3 schools and it works on my other site, so I don't understand why it doesn't work on my new site. It goes to the correct part of the page, but it doesn't do the scroll animation.
js:
<script>
$(document).ready(function () {
$(".navbar a, footer a[href='#myPage']").on('click', function (event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function () {
window.location.hash = hash;
});
}
});
})
</script>
html navbar code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>ABOUT</li>
<li>CLIENTS</li>
<li>SESSIONS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
Please let me know if you need to see any other code. Thanks!

That should work.
Are you positive that the new site is using jQuery and that the IDs of the element that you are scrolling to are correct?
Is your console displaying an error?

How to make navbar stay visible, after href?

I have a bootsrap navbar, and every menu elements of it has a href attribute, to navigate through pages. When I click on, one of the elements the navbar disappears, of course because I left the page which contained it. But how can I do it dinamically? One always visible navbar fixed top, and every html page( navbar element) stay on the page where the navbar is.(without a database)
<nav class="navbar navbar-default" role="navigation" id="topmenu">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown active">
US
</li>
<li class="dropdown">
SERVICES
</li>
<li class="dropdown">
WORK WITH US
</li>
<li class="dropdown">
EN
</li>
</ul>
</nav>

You may do something like this:
<div id="navbar">
Google
...
</div>
<iframe id="frame" width="100%" height="100%">Update Browser!</iframe>
<script>
function goto(url){
document.getElementById("frame").src=url;
}
</script>
This will load the clicked link into the iframe. The page stays the same, so the navbar is still visible. You could also redirect all link cicks to end up into the iframe:
<div id="navbar">
Google
...
</div>
<iframe id="frame" width="100%" height="100%">Update Browser!</iframe>
<script>
window.onload=function (){
[...document.getElementsByTagName("a")].forEach(function(a){
a.onclick=function(e){
e.preventDefault();//the redirect
document.getElementById("frame").src=this.href;
}
});
};
</script>
Or if you like the jquery.load:
<div id="navbar">
Google
...
</div>
<div id="content"></div>
<script>
$(document).ready(function(){
$("a").each(function(){
this.on("click",function(e){
e.preventDefault();
$("#content").load(this.href);
});
});
});
</script>

JQuery NavBar code causing scrolling to div issue

Question Background:
I have a standard bootstrap NavBar that collpases to a button on mobile devices.
The Issue:
When the user clicks on an item in the NavBar dropdown list the page will scroll down to the corrosponding div. I have a piece of JQuery that collpases the dropdown menu when the item has been clicks.
Without the JQuery to close the dropdown Nav menu the page scrolls down to the div with no issues. With the JQuery the page is scrolling down but stops well after the set 10px offset.
Without the JQuery menu closing code - working:
Note the small 10px above the panel item, this is what is wanted.
With the JQuery closing code - Broken:
Note that the page now scrolls down past the top of the div.
The Code:
The NavBar:
<div class="navbar">
<nav class="navbar navbar-default navbarColour" role="navigation" id="nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="~/Images/DC.png" class="dc">
</div>
<div class="middleNavPadding">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pull-right">
<li>Services</li>
<li>Our Mission</li>
<li>Projects Gallery</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
The JQuery Menu closing code:
$(document).ready(function () {
$(".navbar-nav .scroll-link").click(function (event) {
$(".navbar-collapse").collapse('hide');
});
});
The JQuery used to scroll to the Div as set in the NavBar menu:
$(document).ready(function () {
$('.scroll-link').on('click', function (event) {
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
function scrollToID(id, speed) {
var offSet = 10;
var targetOffset = $(id).offset().top - offSet;
$('html,body').animate({ scrollTop: targetOffset }, speed);
}
});
The HTML Markup of the Panel:
<div id="Info">
//panel HTML
</div>
I believe the issue is that the JQuery is setting the 'top' of the page as the bottom of the dropdown menu which is then causing a false offset. Any help with solving a a solution to this would be much appreciated.

You are on the right track, just add the height of the #bs-example-navbar-collapse-1 to your offset.
function scrollToID(id, speed) {
var offSet = 10 + $('#bs-example-navbar-collapse-1').height(); // NAVBAR HEIGHT !!!
var targetOffset = $(id).offset().top - offSet;
$('html,body').animate({ scrollTop: targetOffset }, speed);
}
This should work.