We Keep Coding

add "current" class to the current element of a navigation bar removing this class from the previous item

I try to add a current class on the active item removing it from the previous item. It works but the pages don't change when I click.
$(document).ready(function() {
$(function() {
$('#navbarSupportedContent li a').click(function() {
$('#navbarSupportedContent li').removeClass('current');
$(this).closest('li').addClass('current');
return false;
});
});
});
li.current a { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar-collapse collapse clearfix" id="navbarSupportedContent">
<ul class="navigation clearfix menuItems">
<li class="current">Accueil</li>
<li>A propos</li>
<li>Nos services</li>
<li>Contact</li>
</ul>
</div>

Two active tabs at the same time! How do I do?

The website I am working on has two panels side by side with tabs. It needs to have two panels active at the same time. If I switch panels on the right side, the panel on the left side should still display its content. Now, only one tab is active after I have chosen to switch tab on any of the panels.
I did begin to use Bootstrap, but it was decided that it should be removed from the project. I have then written new SCSS, modified the HTML and created a new javascript file.
Here are some code snippets: First the Javascript file, which handles the logic. Then you can see the code for the left bar, and the content on the panels, and so on.
$(document).ready(function() { /*Javascript for the left bar */
$('ul.nav li').click(function() {
var tab_id = $(this).attr('data-tab');
$('ul.nav li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#" + tab_id).addClass('current');
});
$('ul.cor.li').click(function() { /*Javascript for the right bar */
var tab_id = $(this).attr('data-tab');
$('ul.cor.li').removeClass('active');
$('.tab-content').removeClass('active');
$(this).addClass('active');
$("#" + tab_id).addClass('active');
});
});
ul.nav li {
list-style-type: none;
display: inline;
overflow: hidden;
padding: 3px 15px;
cursor: pointer;
}
.tab-content {
display: none;
background: white;
padding: 15px;
}
.tab-content.current {
display: inherit;
}
.navbar-light {
border-left-color: black;
}
.nav,
.tabs {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!-- left side bar -->
<div class="flex-container">
<div class="overview-flexbox-mid">
<div id="leftPanel">
<ul class="nav nav-tabs navbar-light bg-light" id="leftTabs">
<li class="nav-item nav-link current" data-tab="tab-1"><i class="fa fa-compress" aria-hidden="true"></i> Subject1
</li>
<li class="nav-item nav-link" data-tab="tab-2"><i class="fa fa-book" aria-hidden="true"></i> Subject2
</li>
</ul>
</div>
</div>
</div>
<div id="tab-1" class="tab-content current">
<div class="flex-container-horizontal" id="leftPanelContent1">
<h1>Some text</h1>
</div>
</div>
<!-- left side content -->
<div id="tab-2" class="tab-content">
<h1>More text</h1>
</div>
<!-- right side bar -->
<div class="overview-flexbox-mid">
<div id="rightPanel">
<ul class="cor nav nav-tabs navbar-light bg-light" id="rightTabs">
<li class="nav-item nav-link active" data-tab="tab-5"><i class="fa fa-bar-chart" aria-hidden="true"></i> Subject3
</li>
<li class="nav-item nav-link" data-tab="tab-6"><i class="fa fa-signal" aria-hidden="true"></i> Subject4
</li>
</ul>
</div>
</div>
<!--right side content-->
<div id="tab-5" class="tab-content active">
<div class="flex-container-horizontal">
<h1>Content</h1>
</div>
</div>
<div id="tab-6" class="tab-content">
<h1>Content 2</h1>
</div>

wrap the left and right tab bars in a div with a class of wrap, select to remove the current class based on that class
<div class="wrap">
......
<div id="leftPanel"></div>
......
</div>
<div class="wrap">
......
<div id="rightPanel"></div>
......
</div>
js:
$('.nav li').click(function() {
var tab_id = $(this).attr('data-tab');
$(this).closest('.wrap').find('ul.nav li,.tab-content').removeClass('current');
$(this).addClass('current');
$("#" + tab_id).addClass('current');
})
demo

You trying to remove active class from an activated tab content but while both tab content has same class name, both will lose their active class. modify like this:
$(document).ready(function () {
$('ul.nav li').click(function () {
var tab_id = $(this).attr('data-tab');
$(this).removeClass('current');
$(this).find('.tab-content').removeClass('current');// modify this
$(this).addClass('current');
$("#" + tab_id).addClass('current');
});
$('ul.cor.li').click(function () {
var tab_id = $(this).attr('data-tab');
$(this).removeClass('active');
$(this).find('.tab-content').removeClass('active');
$(this).addClass('active');
$("#" + tab_id).addClass('active');
});
});

Open menu when hover on icon menu JQUERY

I have been searching for a solution but I can't find any that fits to what I woluld like to get. I have an icon and want the dropdown menu opened when HOVER in sreen size larger than 980px, and then when CLICK in screen size smaller than 980px.
This is the code.
/*Hide menu by default*/
$("#menu").hide();
/*When menu button is clicked, toggle the menu*/
$("#menu-btn").click(function() {
$("#menu").slideToggle();
});
$("#menuser").hide();
/*When menu button is clicked, toggle the menu*/
$("#ser_btn").click(function() {
$("#menuser").slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Hamburger menu toggle button-->
<div id="menu-btn">
<img src="images/icon.png" style="height:50px; width:50px;">
</div>
<!--Menu-->
<nav id="menu">
<ul>
<li>INICIO</li>
<li>LA BELLE</li>
<li id="ser_btn">SERVICIOS
<ul id="menuser">
<li>PELUQUERIA</li>
<li>PELUQUERIA</li>
<li>PELUQUERIA</li>
<li>PELUQUERIA</li>
</ul>
</li>
<li>NOTICIAS</li>
<li>CONTACTO</li>
</ul>
</nav>
I would appreciate any help.

$(function() {
// check the event to listen to
var evt = $(window).width() > 980 ? // if the window width is greater than 980
"mouseenter mouseleave" : // then lesten for mouseenter and mousleave
"click"; // otherwise a click event
// hide it by default
$("#menu").hide();
// on the event evt toggle the menu
$("#menu-btn").on(evt, function() {
$("#menu").slideToggle();
});
// hide it by default
$("#menuser").hide();
// on the event evt toggle the menu
$("#ser_btn").on(evt, function() {
$("#menuser").slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Hamburger menu toggle button-->
<div id="menu-btn">
<img src="images/icon.png" style="height:50px; width:50px;">
</div>
<!--Menu-->
<nav id="menu">
<ul>
<li>INICIO</li>
<li>LA BELLE</li>
<li id="ser_btn">SERVICIOS
<ul id="menuser">
<li>PELUQUERIA</li>
<li>PELUQUERIA</li>
<li>PELUQUERIA</li>
<li>PELUQUERIA</li>
</ul>
</li>
<li>NOTICIAS</li>
<li>CONTACTO</li>
</ul>
</nav>

I would just do this using CSS in most cases:
<div id="menu-btn">
<img src="images/icon.png" style="height:50px; width:50px;">
</div>
<!--Menu-->
<nav id="menu">
<ul>
<li>INICIO</li>
<li>CONTACTO</li>
</ul>
</nav>
<style>
nav#menu { display: none }
#menu-btn:hover + nav#menu, nav#menu:hover { display:block }
</style>
Or more often I would nest the nav inside the button
<div id="menu-btn">
<img src="images/icon.png" style="height:50px; width:50px;">
<nav id="menu">
<ul>
<li>INICIO</li>
<li>CONTACTO</li>
</ul>
</nav>
</div>
<style>
#menu-btn nav { display: none }
#menu-btn:hover nav, #menu-btn nav:hover { display:block }
</style>

Close hamburger menu after click event

I have a hamburger menu which is almost complete with just 1 bug/issue that I can't figure out. My nav links to different areas on the home page. So on the home page the user can click a nav link which would instantly take them down to the desired location on the page.
My issue comes as there is no loading so once the user clicks on the nav link they are brought to the location but the dropdown menu will not close. I tried adding .hide to the JS which hides the dropdown on the click of a link but that created my new issue.
After the user clicks one of the nav links it does hide the menu but upon clicking the menu icon again the menu will not open at all. In dev tools I see that upon clicking one of the nav links it is given the style of display:none so I feel that the issue might lie there. Thanks for the help and please let me know if any other information is needed!
HTML:
<nav class="navbar navbar-light navbar-fixed-top">
<div class="wrapping container-fluid">
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav navbar-nav float-sm-right mr-0 menu">
<li class="nav-item">
<span class="sr-only"></span>
</li>
<li class="nav-item">
<a class="nav-link" href="#schedule">Schedule<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#workshops">Workshops</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#locations">Location</a>
</li>
<li class="nav-item">
<a class="nav-link last-link" href="#register">Register</a>
</li>
</ul>
<a class="navbar-brand" href="#home"><img class="logo" src="img/Logo.png" alt=""></a>
</div>
</nav>
CSS for this menu:
.menu{
height: 0;
overflow: hidden;
transition: height 0.3s;
}
.open{
height: 295px;
}
.hamburger {
cursor: pointer;
padding: 15px 10px 15px 0;
display: block;
float: right;
margin-top: 15px;
}
JS:
$('.hamburger').on('click', function () {
$('.menu').toggleClass('open');
});
$( '.menu a' ).on("click", function(){
$('.menu').hide();
});

If you're going to use .toggleClass('open') to open the menu, use it for closing the menu as well.
Generally, though, you'll want to use .addClass() and .removeClass() instead:
$('.hamburger').on('click', function () {
$('.menu').addClass('open');
});
$( '.menu a' ).on("click", function(){
$('.menu').removeClass('open');
});

If your hamburger menu has checkbox behind it, you can simple set it to unchecked to close the hamburger menu
function hideMenu(){
let menuOpen = document.querySelector('.toggler').checked;
if(menuOpen = true){
document.querySelector('.toggler').checked = false;
}
}
window.addEventListener("scroll", hideMenu);

update sidebar main-menu and sub-menu class based on url

I've asked this question here but another problem came up so I decided to keep the old one for reference purposes. Old question here.
The old question was just about updating the class of a main-menu based on the url but now things have changed. I will provide the new sidebar below.
Sidebar without any active class yet
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu">
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
</div>
It would look like this:
Dashboard
Scheduling
--> Foreign Languages
--> ESL Local
--> Summer Workshops
As you can see Scheduling has a sub-menu.
Then how it would look like if I am on the dashboard. The sidebar would look like this
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu [active]"> //without the []
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
</div>
So the Dashboard would be highlighted in this scenario
And how it would look like if Im on any of the sub-menu under Scheduling
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu">
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu [active]">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li [class="active"]><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
Since I am in the Foreign Languages section. The main header Scheduling and this Foreign Langauges would be active but different class. The active class of Scheduling is sub-menu active while Foreign Languages would just have active only.
And javascript that I've tried no longer applies here since it only handles menus without any dropdown. And it didn't work anyway
Old javascript
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
//alert($('ul a').length);
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
}
//alert(this.href);
});
});
</script>
The goal here is to put a "active" class to the section of the sidebar based on the url the user is in. I've just include('sidebar.php') this sidebar so I would only change this file rather than put a sidebar in each php page file. But then the main heading and the dropdown menu has different active classes.
Found the solution with the help of gecco. The javascript is below:
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$(this).parent().closest("li").addClass('active'); //added this line to include the parent
$(this).parent().parent().closest("li").addClass('active');
}
});
});
</script>
I was already halfway with using php to do this HAHAHAHA. if current_url = db_page_url then put echo class=active. HAHAHA.

<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$(this).parent().parent().closest("li").addClass('active2');
}
});
});
</script>
The only change I have done here is adding another line to your JS
$(this).parent().parent().closest("li").addClass('active2');
And here is my style sheet
.active2 > a{
color:red; //what ever the styles you want
}
OR
You can do it without a style
jQuery(function($) {
var path = window.location.href;
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$( this ).parent().parent().closest("li").addClass('active2');
$('.active2 a:first').addClass('active'); //add the active class to the parent node
}
});
});