We Keep Coding

how to close hamburger menu after click open

I have hamburger menu and added click to open a sub menu and after that struggling to close the sub-menu, please check the detailed code below. Thanks...!!
function myFunction() {
document.getElementById("mob").style.display = "inline-flex";
document.getElementById("mob").style.position = "absolute";
}
.hamburger {
width: 35px;
height: 5px;
background-color: #f7941e;
margin: 6px 0;
}
.mobile-menu {
display: none;
}
.hamburger-container {
cursor: pointer;
}
<div class="mobile-navbar">
<div class="hamburger-container" onclick="myFunction()">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="mobile-menu" id="mob">
<ul class="mobile-menu-container">
<li class="mobile-menu-items">Home</li>
<li class="mobile-menu-items">Types Tours
<div class="mobile-types-sub-menu">
<ul class="mobile-types-sub-menu-items">
<li>test-1</li>
<li>test-2</li>
<li>test-3</li>
</ul>
</div>
</li>
<li class="mobile-menu-items">The regions</li>
<li class="mobile-menu-items">Instructors</li>
<li class="mobile-menu-items">Questions / Answers</li>
<li class="mobile-menu-items">Contacts</li>
</ul>
</div>
</div>
</div>

Toggle the class active on the #mob element, adding the CSS attributes you added in your function.
function myFunction() {
const toggle_btn = document.getElementById('mob');
toggle_btn.classList.toggle('active');
}
.hamburger {
width: 35px;
height: 5px;
background-color: #f7941e;
margin: 6px 0;
}
.mobile-menu {
display: none;
}
.hamburger-container {
cursor: pointer;
}
#mob.active {
display: inline-flex;
position: absolute;
}
<div class="mobile-navbar">
<div class="hamburger-container" onclick="myFunction()">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="mobile-menu" id="mob">
<ul class="mobile-menu-container">
<li class="mobile-menu-items">Home</li>
<li class="mobile-menu-items">Types Tours
<div class="mobile-types-sub-menu">
<ul class="mobile-types-sub-menu-items">
<li>test-1</li>
<li>test-2</li>
<li>test-3</li>
</ul>
</div>
</li>
<li class="mobile-menu-items">The regions</li>
<li class="mobile-menu-items">Instructors</li>
<li class="mobile-menu-items">Questions / Answers</li>
<li class="mobile-menu-items">Contacts</li>
</ul>
</div>
</div>
</div>

Create a hidden class and use toggle function to add or remove it
const myFunction = () => document.getElementById("mob").classList.toggle("hidden");
.hamburger {
width: 35px;
height: 5px;
background-color: #f7941e;
margin: 6px 0;
}
.mobile-menu {
display: inline-flex;
position: absolute;
}
.mobile-menu.hidden {
display: none;
}
.hamburger-container {
cursor: pointer;
}
<div class="mobile-navbar">
<div class="hamburger-container" onclick="myFunction()">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="mobile-menu hidden" id="mob">
<ul class="mobile-menu-container">
<li class="mobile-menu-items">Home</li>
<li class="mobile-menu-items">Types Tours
<div class="mobile-types-sub-menu">
<ul class="mobile-types-sub-menu-items">
<li>test-1</li>
<li>test-2</li>
<li>test-3</li>
</ul>
</div>
</li>
<li class="mobile-menu-items">The regions</li>
<li class="mobile-menu-items">Instructors</li>
<li class="mobile-menu-items">Questions / Answers</li>
<li class="mobile-menu-items">Contacts</li>
</ul>
</div>
</div>
</div>

Create a class of active-mobile-menu in the CSS and use the classList.toggle() function in the JavaScript to switch between different classes.
function myFunction() {
let mobileMenu = document.getElementById('mob');
mobileMenu.classList.toggle('active-mobile-menu');
}
.hamburger {
width: 35px;
height: 5px;
background-color: #f7941e;
margin: 6px 0;
}
.mobile-menu {
display: none;
}
.active-mobile-menu{
display: block;
position: absolute;
}
.hamburger-container {
cursor: pointer;
}
<div class="mobile-navbar">
<div class="hamburger-container" onclick="myFunction()">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="mobile-menu" id="mob">
<ul class="mobile-menu-container">
<li class="mobile-menu-items">Home</li>
<li class="mobile-menu-items">Types Tours
<div class="mobile-types-sub-menu">
<ul class="mobile-types-sub-menu-items">
<li>test-1</li>
<li>test-2</li>
<li>test-3</li>
</ul>
</div>
</li>
<li class="mobile-menu-items">The regions</li>
<li class="mobile-menu-items">Instructors</li>
<li class="mobile-menu-items">Questions / Answers</li>
<li class="mobile-menu-items">Contacts</li>
</ul>
</div>
</div>
</div>
**

How to show dropdown menu when clicked

js
const navItems = document.querySelectorAll('.navbar__items')
const dropDown = document.querySelectorAll('.dropdown')
dropDown.forEach(element => {
element.addEventListener('click',()=>{
{
navItems.forEach(nav =>{
nav.classList.toggle('drop')
})
}
})
})
HTML
<ul class="navbar">
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
</ul>
CSS
.navbar{
position: relative;
}
.navbar__items{
position: absolute;
display: none;
}
.drop{
display: block;
}
I have a navbar and each of these navbar items have dropdown items. I want to show these dropdown items when I click on the 'dropdown' class. But the problem is when I click on one of them all the dropdowns are visible. How do I show only the list I've clicked on?

Enter the below code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Click</button>
<div id="myDropdown" class="dropdown-content">
Clicked
Clicked
Clicked
</div>
</div>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>

As mentioned in comments it is better to use Event Delegation technique.
The algorithm is quite simple:
Add listener on the parent element
On click check if dropdown-opener was clicked
Get drop-down which I need to open
Close other dropdowns
Open dropdown from 3.
const allDropdowns = document.querySelectorAll('.navbar__items')
const DROP_CLASS = 'drop';
const navbar = document.querySelector('.navbar');
navbar.addEventListener('click', ({target}) => {
if (!target.classList.contains('dropdown')) return;
const parent = target.parentNode;
const navItems = parent
.querySelector('.navbar__items');
allDropdowns.forEach(el => el !== navItems && el.classList.remove(DROP_CLASS));
if (navItems) {
navItems.classList.toggle(DROP_CLASS);
}
});
.navbar{
position: relative;
}
.navbar__items{
position: absolute;
left: 80px;
display: none;
}
.drop{
display: block;
}
<ul class="navbar">
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
</ul>

Use the event target to get the parentNode, then use the parentNode to query the hidden element as all your elements are grouped in the same parent/child grouping. Also you can set an initial class for hidden, display: none; in each element and add it on click. A forEach loop sets each elements display to none using the hidden class on click.
const navItems = document.querySelectorAll('.navbar__items')
const dropDown = document.querySelectorAll('.dropdown')
// callback function that passes in the event => e from your listener
function showDropdown (e){
// set each navbar__items element display: none using hidden class
navItems.forEach(el => el.classList.add('hidden'))
// query the specific .navbar__items in the event.targets group
let dd = e.target.parentNode.querySelector('.navbar__items')
// remove the hidden class a nd show the dropdown for this event.target
dd.classList.remove('hidden')
}
// iterate over the dropdown element
dropDown.forEach(element => {
// function showDropdown on click
element.addEventListener('click', showDropdown)
})
.navbar {
position: relative;
}
.navbar__items {
position: absolute;
left: 75px;
}
.hidden {
display: none;
}
<ul class="navbar">
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items hidden">
<li>clicked 1</li>
<li>clicked 1</li>
<li>clicked 1</li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items hidden">
<li>clicked 2</li>
<li>clicked 2</li>
<li>clicked 2</li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items hidden">
<li>clicked 3</li>
<li>clicked 3</li>
<li>clicked 3</li>
</ul>
</li>
</ul>

Rather than using addEventlistener you should add onclick method in html to every drop-down with same method name but change the ul class name with for each drop-down and then pass class name in method and then toggle the drop-down with parameter class name.
For example,
function onClick(item) {
if (document.getElementsByClassName(item).classList.contains('hidden')) {
document.getElementsByClassName('dropdown').classList.remove('hidden');
}
if (!document.getElementsByClassName(item)[0].classList.contains('hidden')) {
document.getElementsByClassName('dropdown').classList.add('hidden');
}
}
<ul class="navbar">
<li class="nav-menu">
<div class="dropdown" onclick="onClick('navbar_items1')">click</div>
<ul class="navbar__items1 hidden">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown" onclick="onClick('navbar_items2')">click</div>
<ul class="navbar__items2 hidden">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown" onclick="onClick('navbar_items3')">click</div>
<ul class="navbar__items3 hidden">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
</ul>

Remove Class From All Elements Except Active Element

I have a set of anchor tags that I am adding an active class to via a forEach method. How do I get it so when I add the active class to one anchor tag, it removes this active class from all other anchor tags items?
I must also have it so the 1st anchor tag starts with an active class on it (which I have done via CSS)
CodePen: https://codepen.io/emilychews/pen/gOaXdMr
var tabLink = document.querySelectorAll('.tab-link'),
tabPane = document.querySelectorAll('.tab-pane')
tabLink.forEach(function(item){
item.addEventListener('click', function(){
item.classList.add('active')
}, false)
})
.nav-tabs {
display: flex;
align-items: center;
padding: 1rem 2rem;
list-style: none;
background: lightblue;
}
.tab-link {
margin-left: 4rem;
padding: 1rem;
border-radius: 1px;
transition: .2s;
display: block;
}
.tab-link.active {
background: white;
}
<ul class="nav-tabs"role="tablist">
<li role="presentation"><a class="tab-link active" href="#html-tab" title="html tab" role="tab">HTML</a></li>
<li role="presentation"><a class="tab-link" href="#css-tab" title="css tab" role="tab">CSS</a></li>
<li role="presentation"><a class="tab-link" href="#result-tab" title="result tab" role="tab">Result</a></li>
</ul>

If you use jQuery, You can do this using few lines of code.
Vanilla JS
var tabLink = document.querySelectorAll('.tab-link');
tabLink.forEach(function(item){
item.addEventListener('click', function(){
document.querySelector('.active').classList.remove('active');
item.classList.add('active');
}, false)
})
jQuery
$(document).on('click', '.tab-link', function(){
$('.tab-link').removeClass('active'); // remove active for all first.
$(this).addClass('active'); // add active for clicked element
})

Inside the click event listener, you can simply remove all the active classes from all the children elements inside .tab-link before adding the last active class to the clicked element.
I only added three lines of code below to your original code to achieve what you wanted.
var tabLink = document.querySelectorAll('.tab-link'),
tabPane = document.querySelectorAll('.tab-pane')
tabLink.forEach(function(item){
item.addEventListener('click', function(){
tabLink.forEach(function(item) {
item.classList.remove('active')
})
item.classList.add('active')
}, false)
})
.nav-tabs {
display: flex;
align-items: center;
padding: 1rem 2rem;
list-style: none;
background: lightblue;
}
.tab-link {
margin-left: 4rem;
padding: 1rem;
border-radius: 1px;
transition: .2s;
display: block;
}
.tab-link.active {
background: white;
}
<ul class="nav-tabs"role="tablist">
<li role="presentation"><a class="tab-link active" href="#html-tab" title="html tab" role="tab">HTML</a></li>
<li role="presentation"><a class="tab-link" href="#css-tab" title="css tab" role="tab">CSS</a></li>
<li role="presentation"><a class="tab-link" href="#result-tab" title="result tab" role="tab">Result</a></li>
</ul>

so basically just give each on a different id then in the function just remove the class from each and than add the class.
var tabLink = document.querySelectorAll('.tab-link'),
tabPane = document.querySelectorAll('.tab-pane')
tabLink.forEach(function(item){
item.addEventListener('click', function(){
document.getElementById('a').classList.remove('active');
document.getElementById('b').classList.remove('active');
document.getElementById('c').classList.remove('active');
item.classList.add('active')
}, false)
})
.nav-tabs {
display: flex;
align-items: center;
padding: 1rem 2rem;
list-style: none;
background: lightblue;
}
.tab-link {
margin-left: 4rem;
padding: 1rem;
border-radius: 1px;
transition: .2s;
display: block;
}
.tab-link.active {
background: white;
}
<ul class="nav-tabs"role="tablist">
<li role="presentation"><a id='a' class="tab-link active" href="#html-tab" title="html tab" role="tab">HTML</a></li>
<li role="presentation"><a id='b' class="tab-link" href="#css-tab" title="css tab" role="tab">CSS</a></li>
<li role="presentation"><a id='c' class="tab-link" href="#result-tab" title="result tab" role="tab">Result</a></li>
</ul>

I created a second function that will be called in the click event. That function search for a item where has the class active and remove the class.
var tabLink = document.querySelectorAll('.tab-link'),
tabPane = document.querySelectorAll('.tab-pane')
function clearActiveItemMenu(){
tabLink.forEach(function(item){
if(item.classList.contains('active')){
item.classList.remove('active');
}
});
}
tabLink.forEach(function(item){
item.addEventListener('click', function(){
clearActiveItemMenu();
item.classList.add('active')
}, false)
})
.nav-tabs {
display: flex;
align-items: center;
padding: 1rem 2rem;
list-style: none;
background: lightblue;
}
.tab-link {
margin-left: 4rem;
padding: 1rem;
border-radius: 1px;
transition: .2s;
display: block;
}
.tab-link.active {
background: white;
}
<ul class="nav-tabs"role="tablist">
<li role="presentation"><a class="tab-link active" href="#html-tab" title="html tab" role="tab">HTML</a></li>
<li role="presentation"><a class="tab-link" href="#css-tab" title="css tab" role="tab">CSS</a></li>
<li role="presentation"><a class="tab-link" href="#result-tab" title="result tab" role="tab">Result</a></li>
</ul>

How can I give all tabs in page height based on the biggest rise for the biggest tab among them

How can I give all tabs in page height based on the biggest rise for the biggest tab among them
example
<div id="" class="tab-pane fade in active">
<ul class="autoValidate nav nav-tabs nav-justified nav-thirdlevel hidden-xs">
<li class="active"><a data-toggle="tab" href="#tab1">tab1</a></li>
<li><a data-toggle="tab" href="#tab2">tab2</a></li>
<li><a data-toggle="tab" href="#tab3">tab3</a></li>
</ul>
<div class="panel-group visible-xs" id="undefined-accordion"></div>
<div class="tab-content tab-contentlevel hidden-xs stander-Page-Height">
<div id="tab1" class="tab-pane fade active in"> // for example this tab height is 400px
// something....
</div>
<div id="tab2" class="tab-pane fade"> // for example this tab height is 600px
// something....
</div>
<div id="tab3" class="tab-pane fade"> // for example this tab height is 500px
// something....
</div>
</div>
</div>
How i can take every tabs in the page the height 600px for example using (css || js || jquery)
Thanks you so much UW

.tab-content {
display:flex;
flex-direction: row;
align-items: strech
// other css rules
}
With align-items set to strech all child will be force to fill the height of their parent.

Add the following CSS and all tab will take the height of 600px.
.tab-content {
display: flex;
height: 600px;
align-items: stretch;
}
.tab-pane {
display: block;
margin: 10px;
background: red;
}
EDIT: Added code snippet.
.tab-content {
display: flex;
height: 600px;
align-items: stretch;
}
.tab-pane {
display: block;
margin: 10px;
background: red;
}
<ul class="autoValidate nav nav-tabs nav-justified nav-thirdlevel hidden-xs">
<li class="active"><a data-toggle="tab" href="#tab1">tab1</a></li>
<li><a data-toggle="tab" href="#tab2">tab2</a></li>
<li><a data-toggle="tab" href="#tab3">tab3</a></li>
</ul>
<div class="panel-group visible-xs" id="undefined-accordion"></div>
<div class="tab-content tab-contentlevel hidden-xs stander-Page-Height">
<div id="tab1" class="tab-pane fade active in"> // for example this tab height is 400px // something....
</div>
<div id="tab2" class="tab-pane fade"> // for example this tab height is 600px // something....
</div>
<div id="tab3" class="tab-pane fade"> // for example this tab height is 500px // something....
</div>
</div>

How To Place Mega Drop Down Menu With Position Relative?

I have Created Mega Menu.
On button click mega menu will create and drop down will come down.
The mega menu content bar will hide slider.
I want to move slider down when menu dropdown appears and and the position of slider is replaced by mega menu content.
Dropdown mega menu is in absolute position. if i change it to relative it will replace position of slider with mega menu dropdown content.But styling navbar is disturbed.
this is navigation code
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse navbar-left">
<ul class="nav navbar-nav">
<li class="dropdown menu-large">
Home <b class="caret"></b>
<ul class="dropdown-menu megamenu row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Software</li>
<li>Desktop</li>
<li class="disabled">Mobile</li>
<li>Tablet</li>
<li class="divider"></li>
<li class="dropdown-header">Hardware</li>
<li>Arduino</li>
<li>Raspberry PI</li>
<li>VoCore</li>
<li>Banana PI</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Nano-Tech</li>
<li>AFM</li>
<li>STM</li>
<li>Nano-Tubes</li>
<li>Nano-Wires</li>
<li>Materials</li>
<li class="divider"></li>
<li class="dropdown-header">A.I.</li>
<li>Artificial Intelligence</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">SaaS</li>
<li>On-Demand</li>
<li>No Software</li>
<li>Cloud Computing</li>
<li class="divider"></li>
<li class="dropdown-header">On-Premise</li>
<li>Data Center</li>
<li>Hosting Environment</li>
<li>Internal IT</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Server-Side</li>
<li>PHP</li>
<li>Java</li>
<li>Python</li>
<li>Ruby</li>
<li>ColdFusion</li>
<li>ASP.NET</li>
<li>GO</li>
<li>Perl</li>
<li>Lasso</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Javascript to open dropdown
<script>
$(document).ready(function() {
jQuery(document).ready(function(){
$(".dropdown").hover(
function() { $('.dropdown-menu', this).stop().fadeIn("fast");
},
function() { $('.dropdown-menu', this).stop().fadeOut("fast");
});
});
}
</script>
css
.menu-large {
position: static !important;
}
.megamenu {
padding: 20px 0px;
width: 100%;
}
.megamenu>li>ul {
padding: 0;
margin: 0;
}
.megamenu>li>ul>li {
list-style: none;
}
.megamenu>li>ul>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.megamenu>li ul>li>a:hover,
.megamenu>li ul>li>a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.megamenu.disabled>a,
.megamenu.disabled>a:hover,
.megamenu.disabled>a:focus {
color: #999999;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
color: #00A7E8;
}
.megamenu.disabled>a:hover,
.megamenu.disabled>a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
cursor: not-allowed;
}
.megamenu.dropdown-header {
color: #428bca;
font-size: 18px;
}

If you code this in jsFiddle or codepen or just combine html,css,and js code without php then we can see the real problem.
I'm not able to run you code.
But as per your question i can say it may be issue with z-index.