Setting default content with jQuery

Setting default content with jQuery - javascript

In the code below, the default main content is empty. Unless I click on any of the bottom navbar buttons, no content will show up.
I'd like to set content-1 and menu-1 (its respective button) to be the default, i.e. when the user opens the webpage it would be the first thing they see and the button would be black indicating that it is active.
I tried to use an else statement but it did not work:
// set menu-1 as default
else {
$('.menu-1').addClass('default')
$('.content').addClass('default')
}
Find the entire code below:
$(document).ready(function() {
// only show menu-1
$('.menu-1').click(function() {
if ($('.menu-2, .menu-3').hasClass('active')) {
$('.menu-2, .menu-3').removeClass('active');
$('.content-2, .content-3').removeClass('active');
}
// set menu-1 as default
// else {
// $('.menu-1').addClass('default')
// $('.content').addClass('default')
// }
$('.menu-1').addClass('active');
$('.content-1').addClass('active');
});
// only show menu-2
$('.menu-2').click(function() {
if ($('.menu-1, .menu-3').hasClass('active')) {
$('.menu-1, .menu-3').removeClass('active');
$('.content-1, .content-3').removeClass('active');
}
$('.menu-2').addClass('active');
$('.content-2').addClass('active');
});
// only show menu-3
$('.menu-3').click(function() {
if ($('.menu-2, .menu-1').hasClass('active')) {
$('.menu-2, .menu-1').removeClass('active');
$('.content-2, .content-1').removeClass('active');
}
$('.menu-3').addClass('active');
$('.content-3').addClass('active');
});
});
.container {
margin: 0 auto;
background-color: #eee;
border: 1px solid lightgrey;
width: 20vw;
height: 90vh;
font-family: sans-serif;
position: relative;
}
header {
background-color: lightgreen;
padding: 5px;
text-align: center;
text-transform: uppercase;
}
.bottom-navbar {
position: absolute;
bottom: 0;
width: 100%;
padding: 6px 0;
overflow: hidden;
background-color: lightgreen;
border-top: 1px solid var(--color-grey-dark-3);
z-index: 50;
display: flex;
justify-content: space-between;
> a {
display: block;
color: green;
text-align: center;
text-decoration: none;
font-size: 20px;
padding: 0 10px;
&.active {
color: black;
}
}
}
.menu-1.default,
.menu-1.active,
.menu-2.active,
.menu-3.active {
color: black;
}
.content-1,
.content-2,
.content-3 {
display: none;
}
.content-1.default,
.content-1.active,
.content-2.active,
.content-3.active {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
<div class="container">
<header>My header</header>
<div class="main-content">
<div class="content-1">House content</div>
<div class="content-2">Map content</div>
<div class="content-3">Explore content</div>
<div class="bottom-navbar">
<i class="fa fa-home"></i>
<i class="fa fa-map"></i>
<i class="fa fa-search"></i>
</div>
</div>
In case you find it easier, here's my CodePen:
https://codepen.io/fergos2/pen/vYYaRzN

All that is going on to set up each menu and content item to display on the page is adding the class active. So it looks to me like all you need to do is add that class to the HTML. That way when the page loads it's already "active" and when you click something else you already have it set up to remove the class and set something else as active. So basically, your HTML would look like this:
<header>My header</header>
<div class="main-content">
<div class="content-1 active">House content</div>
<div class="content-2">Map content</div>
<div class="content-3">Explore content</div>
<div class="bottom-navbar">
<i class="fa fa-home active"></i>
<i class="fa fa-map"></i>
<i class="fa fa-search"></i>
</div>
</div>
All I did was give .menu-1 and .content-1 the class of active.
You'll also need to get rid of the css bit which references .content-1.default and .menu-1.default and also set your JS to add the .active back when you click that menu button which you already have. Don't worry about the else statement inside that click function
Let me know if this works out for you!

Related

At a road block with scroll section for my featured items on site

On my site I have a scroll section that will display watches and allow you to scroll on the section similar to what rolex does on their homepage. I created div container for the section and added a wrapper container that I was using to control the items. I also was trying to add arrows that can be used as an option to scroll just like how rolex does on theirs. Nothing is working. The items are there but the functionality isnt. Take a look at Rolex website and scroll down to their watches section on the home page. I want to do exactly that.
I tried adding JavaScript to make it functional but that did nothing for me. I even added a console.log() to see if anything would print in the browser console and got nothing. Please help.
// Select the left and right arrow buttons
const leftButton = document.querySelector('.arrow-button.left');
const rightButton = document.querySelector('.arrow-button.right');
// Select the watch items wrapper element
const watchItemsWrapper = document.querySelector('.watch-items-wrapper');
// Scroll the watch items wrapper element to the left or right when the arrow buttons are clicked
leftButton.addEventListener('click', () => {
watchItemsWrapper.scrollBy({
left: watchItemsWrapper.scrollLeft - 200, // Scroll 200 pixels to the left
behavior: 'smooth' // Use a smooth scroll transition
});
});
rightButton.addEventListener('click', () => {
watchItemsWrapper.scrollBy({
left: watchItemsWrapper.scrollLeft + 200, // Scroll 200 pixels to the right
behavior: 'smooth' // Use a smooth scroll transition
});
});
/* Watch Reel Section */
.watch-reel-container {
display: flex;
position: relative;
flex-wrap: nowrap;
overflow: scroll;
scroll-behavior: smooth;
margin-left: 230px;
}
.watch-items-wrapper {
display: flex;
flex-wrap: nowrap;
}
.watch-reel-item {
flex: 0 0 200px;
padding: 20px;
cursor: pointer;
}
.watch-reel-container img {
width: 400px;
height: 400px;
object-fit: cover;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.watch-name {
margin-top: 10px;
font-size: 18px;
font-weight: bold;
text-align: center;
color: #333;
text-transform: uppercase;
}
.watch-reel-h2 {
margin-top: 150px;
margin-left: 250px;
}
.watch-reel-h2 a {
text-decoration: none;
color: #375ea1;
}
.watch-reel-h2 a:hover {
opacity: 70%;
}
.scroll-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 8px;
background: #ccc;
border-radius: 4px;
}
.arrow-container {
position: absolute;
top: 50%;
transform: translateY(-100%);
display: flex;
justify-content: space-between;
width: 100%;
}
.arrow-button {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: black;
color: white;
font-size: 20px;
cursor: pointer;
}
.arrow-button::before {
left: 0;
content: '>';
}
.arrow-button.left::before {
right: 0;
content: '<';
}
.arrow-button:hover {
background: #333;
cursor: pointer;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
<!-- Beginning of Watch Reel -->
<div class="watch-reel-h2">
<h2>Featured Watches - View all</h2>
</div>
<div class="watch-reel-container">
<div class="watch-items-wrapper">
<div class="watch-reel-item">
<img src="/images/rolex-panda.png" alt="Watch 1">
<p class="watch-name">Rolex Panda</p>
</div>
<div class="watch-reel-item">
<img src="/images/ap-1.png" alt="Watch 2">
<p class="watch-name">AP Royal Oak Offshore</p>
</div>
<div class="watch-reel-item">
<img src="/images/patek-1.png" alt="Watch 3">
<p class="watch-name">Patek Phillipe</p>
</div>
<div class="watch-reel-item">
<img src="/images/patek-1.png" alt="Watch 3">
<p class="watch-name">Patek Phillipe</p>
</div>
<div class="watch-reel-item">
<img src="/images/patek-1.png" alt="Watch 3">
<p class="watch-name">Patek Phillipe</p>
</div>
<div class="watch-reel-item">
<img src="/images/patek-1.png" alt="Watch 3">
<p class="watch-name">Patek Phillipe</p>
</div>
<div class="watch-reel-item">
<img src="/images/patek-1.png" alt="Watch 3">
<p class="watch-name">Patek Phillipe</p>
</div>
</div>
<div class="scroll-bar"></div>
<div class="arrow-container">
<button class="arrow-button left">
<i class="fa fa-arrow-left"></i>
</button>
<button class="arrow-button right">
<i class="fa fa-arrow-right"></i>
</button>
</div>
</div>
<!-- End of Watch Reel -->

Add overflow: scroll to your .watch-items-wrapper:
.watch-items-wrapper {
display: flex;
flex-wrap: nowrap;
overflow: scroll;
}
You can remove the overflow: scroll; from your .watch-reel-container, it's not needed. If you want the container to span full width then add overflow: hidden to your .watch-reel-container.
Next adjust both your scroll functions as such:
Left:
leftButton.addEventListener('click', () => {
watchItemsWrapper.scrollBy({
left: -200,
behavior: 'smooth'
});
});
Right:
rightButton.addEventListener('click', () => {
watchItemsWrapper.scrollBy({
left: 200,
behavior: 'smooth'
});
});
I think this will give you the functionality you're looking for.
If you'd like to hide the scrollbar but keep the functionality, check our this doc from w3schools.
I hope this helps!

When I click on the menu button It is not opening the menu

const menuBtn = document.querySelector('#menuBtn')
const exitBtn = document.querySelector('#exitBtn');
const menu = document.getElementsByClassName('menu');
menuBtn.addEventListener('click' , () => {
menu.style.display = 'block'
})
.fa.fa-bars.menuBtn {
color: #fff;
font-size: 35px;
cursor: pointer;
display: none;
}
.fa.fa-times-circle.exit {
color: white;
font-size: 35px;
cursor: pointer;
}
#media (max-width: 934px) {
.max-width {
padding: 0 50px;
}
.fa.fa-bars.menuBtn {
display: block;
}
.navbar .menu {
position: fixed;
height: 100vh;
width: 100%;
left: 0;
top: 0;
background-color: #111;
text-align: center;
padding-top: 110px;
display: none;
}
.menu{
display: none
}
.exit {
z-index: 999;
display: none;
margin: 1.8rem;
}
.navbar .menu li {
display: block;
}
.navbar .menu li a {
display: inline-block;
margin: 20px 0;
font-size: 35px;
}
}
<nav class="navbar" id="nav">
<div class="max-width">
<div class="logo"><a id="headSpan" href="index.html">Port<span>folio.</span></a></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>CV</li>
<li>Contact</li>
</ul>
<div>
<i class="fa fa-bars menuBtn" id="menuBtn" aria-hidden="true"></i>
</div>
<div class="exit">
<i class="fa fa-times-circle exit" id="exitBtn" aria-hidden="true"></i>
</div>
</div>
</nav>
How do I make it work ? I tested to see if the add event listener was working and it was working but when it comes to displaying the menu when clicked it does not work. Any idea what the issue may be ? I am not that good at using Javascript so any help would be appreciated . Thank you

document.getElementsByClassName('menu'); doesn't return a single element. It returns an HTMLCollection. So menu isn't an element and menu.style.display = 'block doesn't do what you're trying to do.

document.getElementsByClassName('menu') gets multiple elements, all of which have the class 'menu'. The function returns an HTMLCollection, but you can treat it like a list. If you want to use classes, I would recommend using:
var list = document.getElementsByClassName('menu')
for (var item of list) {
// Do Stuff Here
}
If you have multiple menus, consider using JQuery with the .each(function) method for functions.

Button stops being clickable when active

I have the button which the code I show below, it works well when not active, but when I click on it, it changes its color from grey to green as supposed to, but it stops being clickable.
I am no longer able to click on it in order to go back to not active and to its color grey. How can I fix this issue?
$("#TmpFBtn").click(function() {
if ($("#TmpFBtn").hasClass("active")) {
$("#TmpFBtn").removeClass('active');
} else {
$("#TmpFBtn").addClass('active');
}
});
.button {
text-decoration: none;
width: 14%;
float: left;
background-color: #5e6472;
border: none;
color: white;
padding: 5px 12px;
text-align: center;
font-size: 16px;
cursor: pointer;
margin: 0;
}
.button:hover {
background-color: #2a9d8f;
}
.button.active {
background-color: #2a9d8f;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="featuresCB">
<button class="button pksOnsets" style="width: 100%;" id="TmpFBtn" name="TmpFBtn"> Temporal Features <i class="fa fa-caret-down" aria-hidden="true"></i></button>
</div>

$("#TmpFBtn").click(function() {
if ($("#TmpFBtn").hasClass("active")) {
$("#TmpFBtn").removeClass('active');
} else {
$("#TmpFBtn").addClass('active');
}
});
.button {
text-decoration: none;
width: 14%;
float: left;
background-color: #5e6472;
border: none;
color: white;
padding: 5px 12px;
text-align: center;
font-size: 16px;
cursor: pointer;
margin: 0;
}
.button.active {
background-color: #2a9d8f;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="featuresCB">
<button class="button pksOnsets" style="width: 100%;" id="TmpFBtn" name="TmpFBtn"> Temporal Features <i class="fa fa-caret-down" aria-hidden="true"></i></button>
</div>
The problem was mostly with the hover part.As even after 2nd click it remains in the hover state which shows the background green.

It is working but not visible to you because when you hover on it to click :hover is already applied and the background color is applied.
If you inspect and open dev tools you see the active class is being added to it.
So, just remove the :hover state to notice the change.
If you still want to have :hover state, try changing the background color at hover state.
Btw,
A better jQuery for you:
$("#TmpFBtn").click(function() {
$(this).toggleClass("active");
}
It does the same job, but with a lesser number of lines.

JQuery Show/Hide DIV Not working correctly

I have a sub menu div which has a cart span in it. When the user hovers over it, it displays my hidden cart DIV. The user can then move the mouse to the DIV to remove an item.
If the user displays and moves the mouse into the hidden DIV then moves out of this, the DIV is re-hidden
The issue i'm having is that if the user displays the DIV but instead of moving into hidden DIV, goes back to the sub/main menu the DIV is not re-hiding and i have tried everything i can think.
Please check my fiddle
If you dont go to the div first it wont hide it
$('#subMenuCartBox').mouseover(function () {
$('#cartBox').show();
$('#cartBox').mouseleave(function () {
$('#cartBox').hide();
});
}).mouseleave(function () {
setTimeout(function () {
if (!$('#cartBox').length) {
$('#cartBox').hide();
}
});
})
.mainMenu {
width: 100%;
height: 75px;
background-color: lightblue;
}
.subMenu {
width: 100%;
height: 45px;
background-color: gray;
text-align: right;
padding: 10px;
}
.subMenuOptionSpan {
display: inline-flex;
}
.subMenuCartBox {
background-color: deepskyblue;
padding: 5px;
width: 100%;
cursor: pointer;
}
.cartBox {
float: right;
padding: 15px;
background-color: lightgray;
display: none;
left: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainMenu">
Main menu options
</div>
<div class="subMenu">
<div class="row justify-content-end align-items-center">
<span class="subMenuOptionSpan col-12 col-sm-auto">
<i class="fas fa-user fa-lg"></i>
<div id="username">Test of long username</div>
</span>
<span id="subMenuCartBox" class="subMenuOptionSpan col-12 col-sm-auto">
<i class="fas fa-shopping-cart fa-lg"></i>
<div id="cartAmountBox" class="subMenuCartBox">
<span id="cartAmountText" class="subMenuCartAmount">0 item(s) - £0.00</span>
</div>
</span>
</div>
</div>
<div id="cartBox" class="cartBox">
<b id="emptyCart">There are currently no items in your cart.</b>
</div>
I need the hidden DIV to re-hide if the user goes anywhere on the page without having to go inside it and then out of it.

With Jquery you can check on which side the mouse leaves the button and keep the div open when you leave the button on the bottom.
$('#subMenuCartBox').mouseover(function () {
$('#cartBox').show();
$('#subMenuCartBox').mouseleave(function (e) {
var $this = $(this);
var bottom = $this.offset().top + $this.outerHeight();
if(e.pageY < bottom) {
console.log("CLOSE");
$('#cartBox').hide();
}
});
$('#cartBox').mouseleave(function () {
$('#cartBox').hide();
});
}).mouseleave(function () {
setTimeout(function () {
if (!$('#cartBox').length) {
$('#cartBox').hide();
}
});
})

$('#subMenuCartBox').mouseover(function () {
$('#cartBox').show();
}).mouseleave(function () {
$('#cartBox').hide();
})
.mainMenu {
width: 100%;
height: 75px;
background-color: lightblue;
}
.subMenu {
width: 100%;
height: 45px;
background-color: gray;
text-align: right;
padding: 10px;
}
.subMenuOptionSpan {
display: inline-flex;
}
.subMenuCartBox {
background-color: deepskyblue;
padding: 5px;
width: 100%;
cursor: pointer;
}
.cartBox {
float: right;
padding: 15px;
background-color: lightgray;
display: none;
left: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainMenu">
Main menu options
</div>
<div class="subMenu">
<div class="row justify-content-end align-items-center">
<span class="subMenuOptionSpan col-12 col-sm-auto">
<i class="fas fa-user fa-lg"></i>
<div id="username">Test of long username</div>
</span>
<span id="subMenuCartBox" class="subMenuOptionSpan col-12 col-sm-auto">
<i class="fas fa-shopping-cart fa-lg"></i>
<div id="cartAmountBox" class="subMenuCartBox">
<span id="cartAmountText" class="subMenuCartAmount">0 item(s) - £0.00</span>
</div>
</span>
</div>
</div>
<div id="cartBox" class="cartBox">
<b id="emptyCart">There are currently no items in your cart.</b>
</div>
Do you mean you want to archive this? please clarify your question.

Removing Class Using Javascript

I'm trying to teach myself a little javascript for project I am working on and just wanted to see if I could get some help. I use 3 different drop down menus and I use the below function to hide one menu when another is clicked. It worked
function DropDownMenuNavigation() {
document.getElementById("DropDownMenuNav").classList.toggle("show");
document.getElementById('DropDownMenuChart').classList.remove('show');
}
The above code worked well when I had 2 different drop down menus. But now that I have 3 it doesn't seem to see the 3 line I've added below.
function DropDownMenuNavigation() {
document.getElementById("DropDownMenuNav").classList.toggle("show");
document.getElementById('DropDownMenuChart').classList.remove('show');
document.getElementById('DropDownMenuCat').classList.remove('show');
}
If I switch the bottom line with the middle line it will regonize that line, I'm guessing there is something wrong with the format I'm writing it in? Something tells me I'm not including a separator or something. Anyways, I know its something small, maybe someone could point it out to me.
EDIT:
JAVASCRIPT
<script>
function DropDownMenuNavigation() {
document.getElementById("b2DropDownMenuNav").classList.toggle("show");
document.getElementById("b2DropDownMenuCat").classList.toggle("remove");
document.getElementById("b2DropDownMenuCha").classList.toggle("remove");
}
function DropDownMenuCategory() {
document.getElementById("b2DropDownMenuCat").classList.toggle("show");
document.getElementById("b2DropDownMenuNav").classList.toggle("remove");
}
function DropDownMenuCharts() {
document.getElementById("b2DropDownMenuCha").classList.toggle("show");
document.getElementById("b2DropDownMenuNav").classList.toggle("remove");
}
</script>
HTML
<div class="dropbtn" style="float: left;">
<button onclick="DropDownMenuNavigation()" class="dropbtn">☰ MENU</button>
</div>
<div class="dropbtn" style="float: left;">
<button onclick="DropDownMenuCategory()" class="dropbtn">CATEGORIES</button>
</div>
<div class="dropbtn" style="float: left;">
<button onclick="DropDownMenuCharts()" class="dropbtn">CATEGORIES</button>
</div>
<div class="dropdown">
<div id="b2DropDownMenuCategory" class="dropdown-content">
1
</div>
</div>
<div class="dropdown">
<div id="b2DropDownMenuCharts" class="dropdown-content">
2
</div>
</div>
<div class="dropdown">
<div id="b2DropDownMenuNavigation" class="dropdown-content">
3
</div>
</div>
CSS
/* Dropdown Button */
.dropbtn {
background-color: #0066a2;
color: white;
padding: 1px;
font-size: 15px;
font-weight: bold;
border: none;
cursor: pointer;
}
.dropbtn a {
color: #FFFFFF;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
float: left;
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #0066a2;
min-width: 260px;
max-width: 960px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #000000;
text-decoration: none;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

The code you posted has mismatches between the actual ids of the content and the document.getElementById() lines, but assuming that you correct that, your code does in fact work, but each bit of content just winds up going under the other, so you never see the correct content.
function DropDownMenuNavigation() {
document.getElementById("b2DropDownMenuNav").classList.toggle("show");
document.getElementById("b2DropDownMenuCat").classList.toggle("remove");
document.getElementById("b2DropDownMenuCha").classList.toggle("remove");
}
function DropDownMenuCategory() {
document.getElementById("b2DropDownMenuCat").classList.toggle("show");
document.getElementById("b2DropDownMenuNav").classList.toggle("remove");
}
function DropDownMenuCharts() {
document.getElementById("b2DropDownMenuCha").classList.toggle("show");
document.getElementById("b2DropDownMenuNav").classList.toggle("remove");
}
/* Dropdown Button */
.dropbtn {
background-color: #0066a2;
color: white;
padding: 1px;
font-size: 15px;
font-weight: bold;
border: none;
cursor: pointer;
}
.dropbtn a {
color: #FFFFFF;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
float: left;
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #0066a2;
min-width: 260px;
max-width: 960px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #000000;
text-decoration: none;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
<div class="dropbtn" style="float: left;">
<button onclick="DropDownMenuNavigation()" class="dropbtn">☰ MENU</button>
</div>
<div class="dropbtn" style="float: left;">
<button onclick="DropDownMenuCategory()" class="dropbtn">CATEGORIES</button>
</div>
<div class="dropbtn" style="float: left;">
<button onclick="DropDownMenuCharts()" class="dropbtn">CATEGORIES</button>
</div>
<div class="dropdown">
<div id="b2DropDownMenuCat" class="dropdown-content">
1
</div>
</div>
<div class="dropdown">
<div id="b2DropDownMenuCha" class="dropdown-content">
2
</div>
</div>
<div class="dropdown">
<div id="b2DropDownMenuNav" class="dropdown-content">
3
</div>
</div>
But, since you are new to this, it's best not to start off with bad habits, so don't use inline HTML event attributes (i.e. onclick, etc.), there are many reasons why and you can review them here.
Next, you have a lot of unneeded HTML and the structure of the HTML should be altered to represent the hierarchy of the content.
Also, you don't need separate functions for each menu click as trying to keep track of what should be hidden and what should be shown in an ever-increasing list of menu items is not a scaleable result.
When these changes are made, the HTML is much cleaner and less involved and the JavaScript is also much simpler:
// First, get references to the HTML elements your code will need.
// You could get individual references, like this:
/*
var b2DropDownMenuNav = document.getElementById("b2DropDownMenuNav");
var b2DropDownMenuCat = document.getElementById("b2DropDownMenuCat");
var b2DropDownMenuCha = document.getElementById("b2DropDownMenuCha");
*/
// But in your case, a single reference to the collection of menus will do.
// We'll also want that collection to be converted to a JavaScript array.
var menus = Array.prototype.slice.call(document.querySelectorAll(".dropbtn"));
// Now, we can just loop over the array and give the buttons a common function
// to perform when they are clicked (no need for multiple functions.
menus.forEach(function(menu){
menu.addEventListener("click", function(){
// Hide any currently showing menu content
Array.prototype.slice.call(document.querySelectorAll(".dropdown-content")).forEach(function(content){
content.classList.remove("show");
});
// Show the content of the menu that was clicked:
menu.querySelector(".dropdown-content").classList.toggle("show");
});
});
/* Dropdown Button */
.dropbtn {
background-color: #0066a2;
color: white;
padding: 1px;
font-size: 15px;
font-weight: bold;
border: none;
cursor: pointer;
float:left; /* no need to write this inline with the HTML, just put it here */
}
.dropbtn a {
color: #FFFFFF;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
/* The container <div> - needed to position the dropdown content */
/* I can't see any need for this class at all:
.dropdown {
float: left;
position: relative;
display: inline-block;
}
*/
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
background-color: #0066a2;
min-width: 260px;
max-width: 960px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
position: absolute;
/* z-index: 1; <-- NOT NEEDED */
}
/* Links inside the dropdown */
.dropdown-content a {
color: #000000;
text-decoration: none;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show { display:block; }
<!-- There is no need to nest button elements inside of div elements.
Just get rid of the buttons completely and make the divs the clickable
elements. -->
<div class="dropbtn" id="b2DropDownMenuNav">☰ MENU
<div class="dropdown dropdown-content">1</div>
</div>
<div class="dropbtn" id="b2DropDownMenuCat">CATEGORIES
<div class="dropdown dropdown-content">2</div>
</div>
<div class="dropbtn" id="b2DropDownMenuCha">CATEGORIES
<div class="dropdown dropdown-content">3</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Setting default content with jQuery - javascript

Related

At a road block with scroll section for my featured items on site

When I click on the menu button It is not opening the menu

Button stops being clickable when active

JQuery Show/Hide DIV Not working correctly

Removing Class Using Javascript

Categories

Resources