We Keep Coding

Clicking a Bootstrap Nav Tab won't scroll to Tab Pane - jQuery / Bootstrap

I have some Bootstrap vertical tabs that I'm struggling with what I felt like would be a simple operation.
Goal:
On the click of Tab, I want to smooth-scroll to the corresponding pane.
What's Actually Happening:
On click of the tab, the browser animates to the tab, not the tab pane. I've tried passing in the paneId instead of the ID, but that doesn't work at all. Any idea where I'm going wrong?
Codepen:
Here's a Codepen: Codepen!
jQuery:
$("#tabs .nav-link").click(function (e) { //on click of nav tav, perform this:
var id = $(e.target).prop("id"); //Grab ID of .nav-link clicked
var paneId = id.replace("tab", "pane"); //Replace "tab" with "pane" and assign new var
function navigateToElement(id) {
$("html, body").animate(
{
scrollTop: $("#" + id).offset().top
},
300
);
}
navigateToElement(id); //Tried with "paneId" instead of "id" to scroll to the pane, but doesn't work
});
Any idea where I'm going wrong?

This line:
var paneId = id.replace("tab", "pane"); //Replace "tab" with "pane" and assign new var
Is creating a variable like: v-pills-profile-pane and there isn't a div on the page with that id. I did see a div with id="v-pills-profile". Change that last line to this and it should work:
var paneId = id.replace("-tab", "");

I just realized that it doesn't matter what pane I scroll to, as bootstrap will display the panes under #panes. As long as I can scroll to that, I'm good. This code worked:
$("#tabs .nav-link").click(function (e) {
var target = $("#panes");
$([document.documentElement, document.body]).animate(
{
scrollTop: $(target).offset().top - 20, // added a bit of offset
},
350
);
});

javascript does not always fire in correct order an sometimes breaks

Im a little bit stumped on this for a number of reasons, sometimes it works, sometimes it does not. When you narrow the view port to less than 945px the subnav elements should toggle but sometimes they do not. I am also getting some unexpected results.
I have a codepen here
https://codepen.io/robbiemcmullen/pen/BqdRpN
my code is as follows:-
//toggle for subnavs
$(document).ready(function(){
//only toggle if window size is less than 945px
$(window).resize(function(){
var submenu = $('.nav-wrapper');
if (window.innerWidth < 945) {
$(document).on('click','nav ul li',function() {
$(submenu).toggle();
});
}
});
var listItem = $('.navigation-toggles__list-item');
//hide mega menu when settings activated
$(listItem).mouseleave(function(){
$(userMenu).hide();
});
var userIcon = $('.navigation-user-icon'),
userMenu = $('.dashboard-user-menu');
//toggle dashboard menu
$(userIcon).click(function(e) {
e.preventDefault();
$(userMenu).toggle();
});
});
can anybody tell me where I am going wrong?

Change slide in carousel depending on URL

I'm currently using JQ Carousel (http://5509.github.io/jq.carousel/) and I'm trying to figure out how to change the slide in the carousel after the load pages. For example, there are 3 slides. When I click on the 3rd slide and loads a page with a URL containing ".../room-3/...", the slide on the loaded page will show the 3rd slide instead of showing the initial slide.
I tried the script below but no success. Any help is appreciated!
Update: Below is the entire script that I use for the carousel. This appears on all the pages that has the carousel. That last portion of the script, I'm assuming, needs to be updated so it would work on the other pages.
<script src="/path/to/jq.carousel.js"></script>
<script>
// Script that appears on all pages
(function() {
var $carousel = $('#carousel_2').carousel({
start: 1,
indicator: true
});
var currSlide = 1;
var totalSlides = $(".carousel_box").length - 4;
$('#carousel_2_prev').on('click', function(ev) {
ev.preventDefault();
$carousel.carousel('prev');
});
$('#carousel_2_next').on('click', function(ev) {
ev.preventDefault();
$carousel.carousel('next');
});
}());
// Script that appears only on the third page that has the third room
$(document).ready(function() {
if(window.location.href.indexOf('/room-3/') >= 0) {
var $carousel = $('#carousel_2').carousel({
start: 3
});
});
});
</script>

jQuery select menu data attributes and set background image URL

I have the feeling I'm going around this totally the wrong way; here is the fiddle: http://jsfiddle.net/qhuprcLz/
What I'm trying to do is whenever I hover a main menu option, I want to grab the data-type set on that menu and set class on the main and then when I hover on the sub menu any of the menu items to get the data-background attr and set the background image on the container.
I loaded the site and menu into the jsfiddle so you can get a better understanding of what I mean.
JS:
// tablet and desktop only
if (window.matchMedia('(min-width: 960px)').matches) {
// menu background
$('.menu-menu ul li.cm-menu-item-responsive').on("mouseover", function () {
var menuType = $(this).attr("data-type");
var menuBackground = $(menuType + " .ty-menu__submenu-list li").attr("data-background");
console.log("menu type:"+menuType);
console.log("menu background:"+menuBackground);
$(this).find("div.ty-menu__submenu").addClass(menuType);
$(this).find("div.ty-menu__submenu").css('background-image', 'url(menu-' + menuBackground + '.png)');
});
}

Solution i came up with is as follows:
// menu background
$('.menu-menu ul li.cm-menu-item-responsive').on("mouseover", function () {
var menuType = $(this).attr("data-type");
$(this).find("div.ty-menu__submenu").addClass(menuType);
});
$('.ty-menu__submenu-list li').on("mouseover", function () {
var menuBackground = $(this).attr("data-background");
//console.log(menuBackground);
$("div.ty-menu__submenu.ty-menu__submenu-to-right").addClass(menuBackground);
});

.toggle() function adds overflow hidden inline

In the site that I'm working on, I am using the jQuery .toggle() function to display and hide the navigation when viewing the site in mobile devices. Here's the code that I am using:
<script>
$(document).ready(function() {
$('.nav-toggle').click(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
toggle_switch.html('Show');//change the button label to be 'Show'
}else{
toggle_switch.html('Hide');//change the button label to be 'Hide'
}
});
});
});
</script>
It is toggling the navigation but the text links are not displaying. I've used the element inspector in chrome and I'm seeing that overflow:hidden is being added inline to the element by the .toggle() function but it is not being removed when toggling to display the links. I've taken a look at the jQuery documentation for this but it doesn't mention anything about overflow:hidden. You can see that this is being adding by this function because it does not appear until after clicking the toggle button
Here's the url to the site: http://theinfluence.iamchrisbarnard.com
The toggle function is being applied to the toggle icon in the top right but can only be seen at smaller sceensizes. And it's toggling the nav element at the very top of the page.
What could be causing this issue?

Instead of making background image for the toggle menu try adding as image. Code something similar to
Html
<img src="images/icon_mobile_menu.jpg" alt="m"> Menu
jQuery
$(window).resize(function() {
var windowWidth = $(window).width();
if (windowWidth < 366) {
$('#nav').hide();
$('#mobibtn').show();
} else {
$('#nav').show();
$('#mobibtn').hide();
$('#mobimenu').hide();
}
});
$(window).load(function() {
var windowWidth = $(window).width();
if (windowWidth < 366) {
$('#nav').hide();
$('#mobibtn').show();
} else {
$('#nav').show();
$('#mobibtn').hide();
$('#mobimenu').hide();
}
});
$(document).ready(function() {
$('#mobibtn').click(function() {
$('#mobimenu').toggle();
});
});
(You may see live example at http://pfitr.net/frontend/index.html )