We Keep Coding

How to hide navigation bar on link click?

I have 3 buttons and a responsive hamburger menu. Everything works as expected, but I can't think of a way to make a navigation bar go away as soon as I click on a button.
The program is supposed to work like this: clicking hamburger menu activates 3 buttons, whenever user clicks on any of those 3 buttons it hides the buttons and only leaves the button that was clicked.
This is the wanted outcome:
This is my code so far.
html:
<div class="selectSection">
<button type="button" data-number="1" class="active">1</button>
<button type="button" data-number="2">2</button>
<button type="button" data-number="3">3</button>
</div>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div>
<div class="content" data-number="1">
<p>1st page</p>
</div>
<div class="content" data-number="2">
<p>2nd page</p>
</div>
<div class="content" data-number="3">
<p>3rd page</p>
</div>
</div>
css
.content:not(:first-child) {
display: none;
}
.active {
color: orange !important;
}
.hamburger {
display: none;
}
#media all and (max-width: 800px) {
.hamburger {
display: inline-block;
cursor: pointer;
z-index: 7;
}
.hamburger .line {
width: 30px;
height: 3px;
background: black;
margin: 6px 0px;
}
.selectSection {
display: none;
overflow: hidden;
}
.selectSection.active {
display: block;
}
}
js
// change active class, show the clicked element only and hide the others
// grab all the buttons
let Buttons = document.querySelectorAll(".selectSection button");
// loop through the buttons using for..of
for (let button of Buttons) {
// listen for a click event
button.addEventListener("click", (e) => {
// et = event target
const et = e.target;
// slect active class
const active = document.querySelector(".active");
// check for the button that has active class and remove it
if (active) {
active.classList.remove("active");
}
// add active class to the clicked element
et.classList.add("active");
// select all classes with the name content
let allContent = document.querySelectorAll(".content");
// loop through all content classes
for (let content of allContent) {
// display the content if the class has the same data-attribute as the button
if (
content.getAttribute("data-number") ===
button.getAttribute("data-number")
) {
content.style.display = "block";
}
// if it's not equal then hide it.
else {
content.style.display = "none";
}
}
});
}
hamburger = document.querySelector(".hamburger");
hamburger.onclick = function () {
navBar = document.querySelector(".selectSection");
navBar.classList.toggle("activate");
};
This is the demo:
https://codepen.io/f4kermak3r/pen/ExRPKzJ

you are using the wrong css class in your js file. At line 44, you must change navBar.classList.toggle("activate") to navBar.classList.toggle("active"). That should work.

Show/hide div in JS

I'm pretty fresh to JS.
For n amount of bar divs I have n amount foo divs. By clicking on bar[1], I want foo[1] to show or hide. The same goes for bar[2]/foo[2], bar[5]/foo[5], bar[3]/foo[3],...bar[n]/foo[n] in no exact order.
With this code I am able to show and hide, but only all of the divs at the same time. What should I change, so that I am able to hide or show only one of the divs?
function getContent() {
var x = document.getElementsByClassName("foo");
for (var i = 0; i < x.length; i++) {
if (x[i].style.display === "none") {
x[i].style.display = "block";
} else {
x[i].style.display = "none";
}
}
}
document.querySelector(".bar").addEventListener("click", getContent);
.foo {
display: none;
}
.bar {
padding: 5px;
display: block;
}
<div>
<div class="bar" onclick="getContent()">bar</div>
</div>
<div class="foo">foo</div>

No need to use JS here, HTML is more powerful than you think: if you want to show-or-hide information, the <details> element's got you covered.
.all-or-nothing summary {
display: inline-block;
cursor: pointer;
}
<details class="all-or-nothing">
<summary>Toggle all divs</summary>
<div>
The first div
</div>
<div>
The second div
</div>
<div>
The third div
</div>
</details>

Use a variable to hold the index of the current DIV to show, rather than looping over all the DIVs.
let fooIndex = 0;
let allFoo = document.querySelectorAll(".foo");
function getContent() {
if (fooIndex < allFoo.length) {
allFoo[fooIndex].classList.toggle("foo");
allFoo[fooIndex].classList.toggle("bar");
fooIndex++;
}
}
document.querySelector(".bar").addEventListener("click", getContent);
.foo {
display: none;
}
.bar {
padding: 5px;
display: block;
}
<div>
<div class="bar">bar</div>
</div>
<div class="foo">foo1</div>
<div class="foo">foo2</div>
<div class="foo">foo3</div>
<div class="foo">foo4</div>

//let fooIndex = 0;
function getContent() {
var x = $(".card");
x.append('<div class="foo" onclick="hideContent(this)">foo1</div>');
//$(this).addClass('bar');
}
function hideContent(a) {
$(a).removeClass('foo');
$(a).addClass('bar');
}
.foo {
display: none;
}
.bar {
padding: 5px;
display: block;
}
<div class="card">
<div onclick="getContent();" class="bar">bar</div>
</div>

Changing display after animation

I'm trying to change an element's display to none after a CSS transition. This is because I want elements below the removed to move up (or down) to take the removed element's place. The transition is working, but it doesn't change the display.
.glossary-item {
margin: 20px 0;
padding: 20px;
box-sizing: border-box;
border: 1px solid;
opacity: 1;
}
.hidden {
display: none;
}
.transition.hidden {
display: block;
opacity: 0;
}
.transition {
transition: opacity 1s ease;
}
<input type="text" id="glossaryFilter" onkeyup="myFunction()" placeholder="Search..">
<div id="glossary-container">
<div class="glossary-item">
<div class="glossary-body">
<h5 class="glossary-title">Title</h5>
<p>Content</p>
</div>
</div>
<div class="glossary-item">
<div class="glossary-body">
<h5 class="glossary-title">Other</h5>
<p>Stuff</p>
</div>
</div>
</div>
function myFunction() {
var input, filter, cards, cardContainer, h5, title, i;
input = document.getElementById("glossaryFilter");
filter = input.value.toUpperCase();
cardContainer = document.getElementById("glossary-container");
cards = cardContainer.getElementsByClassName("glossary-item");
for (i = 0; i < cards.length; i++) {
title = cards[i].querySelector(".glossary-body h5.glossary-title");
if (title.innerText.toUpperCase().indexOf(filter) > -1) {
cards[i].classList.add('transition');
cards[i].classList.remove('hidden');
} else {
cards[i].classList.add('transition');
cards[i].classList.add('hidden');
}
}
}

the class:
displayNone{
display: none;
}
some js:
const afterAnimate = (()=>{
setTimeout(()=>{
//change "elem" to the fitting element
elem.classList.add("displayNone");
}, 1000);
})
//add the function-call to your event which triggers the animation
afterAnimate();

How do I increment a global variable onmousehover, but have it return to it's normal value onmouseout?

Hi i'm new to javascript and is trying to create the following functionality.
I have 7 buttons. Some of these are hovered from the beginning. This depends on a numeric value fetched from the database. So when this value from the database is 4 then 4 buttons will be hovered
However, when hovering the "Remembered" or "Didn't remember" buttons, as seen in the picture below. The number of buttons that are hovered should change temporarily.
When "Remembered" is hovered - button 5 should also be hovered.
When "Remembered" is not hovered - only 4 buttons should be hovered again.
When "DidNotRemember is hovered" - only button 1 should be hovered.
When "DidNotRemember" is not hovered - only 4 buttons should be hovered again.
Below is my approach, and I don't quite understand why it doesn't work.
My code:
var actualLeitnerbox = 4; // Dummy value. Will normally be fetched from database
var leitnerbox = actualLeitnerbox;
function rememberedHovered(leitnerbox) {
leitnerbox += 1;
return leitnerbox
}
function rememberedNotHovered(leitnerbox, actualLeitnerbox) {
leitnerbox = actualLeitnerbox;
return leitnerbox
}
function didNotRememberHovered(leitnerbox) {
leitnerbox = 1;
return leitnerbox
}
function didNotRememberNotHovered(leitnerbox, actualLeitnerbox) {
leitnerbox = actualLeitnerbox;
return leitnerbox
}
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < leitnerbox; i++) {
btns[i].classList.add("active");
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
}
/* Style the active class, and buttons on mouse-over */
.active,
.btn:hover {
background-color: #666;
color: white;
}
<button onmouseover="rememberedHovered()" onmouseout="rememberedNotHovered()" class="btn "> Remembered </button>
<button onmouseover="didNotRememberHovered()" onmouseout="didNotRememberNotHovered()" class="btn "> Did Not Remember </button>
<div id="myDIV">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn">7</button>
</div>
Thanks for reading this

First:
Your functions function rememberedHovered(leitnerbox) and others accept parameters, but you do not pass them on hover event <button onmouseover="didNotRememberHovered()" onmouseout="didNotRememberNotHovered()" class="btn "> Did Not Remember </button>.
Since leitnerbox and actualLeitnerbox are globals - you don't really need your functions to have them as parameters.
Second:
You don't have a function to change the state of the buttons.
This part of code
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < leitnerbox; i++) {
btns[i].classList.add("active");
}
will only work on first load, but won't change anything when you hover over the buttons.
So you need it as a function as well and place it inside your onHover functions.
And you also need to change this part a bit.
Since the number of active buttons change, you will have to deactivate them somehow.
I hope this is your desired functionality:
var actualLeitnerbox = 4;
var leitnerbox = actualLeitnerbox;
function rememberedHovered() {
leitnerbox += 1;
activate();
}
function rememberedNotHovered() {
leitnerbox = actualLeitnerbox;
activate();
}
function didNotRememberHovered() {
leitnerbox = 1;
activate();
}
function didNotRememberNotHovered() {
leitnerbox = actualLeitnerbox;
activate();
}
function activate(){
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for(let i = 0; i < btns.length; i++){
btns[i].classList.remove("active");
}
for (var i = 0; i < leitnerbox; i++) {
btns[i].classList.add("active");
}
}
activate();
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
}
/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
background-color: #666;
color: white;
}
<button onmouseover="rememberedHovered()" onmouseout="rememberedNotHovered()" class="btn "> Remembered </button>
<button onmouseover="didNotRememberHovered()" onmouseout="didNotRememberNotHovered()" class="btn "> Did Not Remember </button>
<div id="myDIV">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn">7</button>
</div>

You should make each function do specific task
Moreover, leitnerbox and actualLeitnerbox in this case are undefined, because in the HTML, you call these function without any parameters
function rememberedHovered(leitnerbox) {
// ...
}
function rememberedNotHovered(leitnerbox, actualLeitnerbox) {
// ...
}
function didNotRememberHovered(leitnerbox) {
// ...
}
function didNotRememberNotHovered(leitnerbox, actualLeitnerbox) {
// ...
}
Below snippet should help you
var actualLeitnerbox = 4;
var leitnerbox = actualLeitnerbox;
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
function hover(i) {
btns[i].classList.add("active");
}
function unhover(i) {
btns[i].classList.remove("active");
}
function hoverAll() {
for (var i = 0; i < actualLeitnerbox; i++) hover(i)
}
function unhoverAll() {
for (var i = 0; i < actualLeitnerbox; i++) unhover(i)
}
function rememberedHovered() {
hover(actualLeitnerbox)
}
function rememberedNotHovered() {
unhover(actualLeitnerbox)
}
function didNotRememberHovered() {
unhoverAll()
hover(0)
}
function didNotRememberNotHovered() {
unhoverAll()
hoverAll()
}
for (var i = 0; i < leitnerbox; i++) {
btns[i].classList.add("active");
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
}
/* Style the active class, and buttons on mouse-over */
.active,
.btn:hover {
background-color: #666;
color: white;
}
#myDIV {
margin-top: 5rem;
}
<button onmouseover="rememberedHovered()" onmouseout="rememberedNotHovered()" class="btn "> Remembered </button>
<button onmouseover="didNotRememberHovered()" onmouseout="didNotRememberNotHovered()" class="btn "> Did Not Remember </button>
<div id="myDIV">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn">7</button>
</div>

JavaScript: Multiple Persistent Index Variables

I'm new to the wold of programming and have run into a bit of trouble making a photo gallery with JS.
So, the thumbnails invoke a modal with the appropriate image that is passed via an index as parameter. I've used a bit of JQuery just to attach handler on all the thumbnails without looping.
The very first Modal initialization works fine, I'm able to switch between images and then close the modal just fine. After that if I reinitialize the modal, the first image appears correct but when using the "Next" and "Previous" buttons another image appears in the modal. After closer inspection (and a bunch of variable logs) I've determined that the old index (from the first modal initialization) persists within the program thus the function is running the previous index and the new one passed to it. The more times you close it the more index variables you have. It almost seems like the function is running multiple copies of itself and appending all those images onto that one modal.
Sorry if this is a very obvious mistake. I don't really post on this forum but try to solve it myself however after like 6 hours and 50 Chrome tabs, I'm just about done. Thanks a lot! Here's my code:
https://jsfiddle.net/5yejqw8a/4/#&togetherjs=M77M8B8LU8
$(document).ready(function(){
$('.GalleryImg').on('click', function() { //Attach event handler on each photo
var GalleryImgs = Array.prototype.slice.call(document.getElementsByClassName('GalleryImg')); //Turns object array to an a proper array
var ImgIndex = GalleryImgs.indexOf(this); //Position of img clicked
OpenModal(ImgIndex); //Passes the index into the modal function
});
function OpenModal(n) { //Modal function with index parameter
var SlideIndex = n;
console.log("Start Index = "+SlideIndex);
var Lightbox = document.getElementById("Lightbox");
var Modal = document.getElementById("ModalContent");
var Slides = document.getElementsByClassName("ModalSlides");
Lightbox.style.display = "block";
Slides[SlideIndex].style.display = "block";
var PreviousBtn = document.getElementById("PreviousBtn");
PreviousBtn.addEventListener('click', function() {
if (SlideIndex > 0) {
Slides[SlideIndex].style.display = "none";
SlideIndex --;
Slides[SlideIndex].style.display = "block";
console.log("PCurrent = "+SlideIndex);
} else {
return;
};
});
var NextBtn = document.getElementById("NextBtn");
NextBtn.addEventListener('click', function() {
if (SlideIndex < Slides.length-1) {
console.log(SlideIndex);
Slides[SlideIndex].style.display = "none";
SlideIndex ++;
Slides[SlideIndex].style.display = "block";
console.log("NCurrent = "+SlideIndex);
} else {
return;
};
});
var CloseBtn = document.getElementById("CloseBtn");
CloseBtn.addEventListener('click', function() {
Lightbox.style.display = "none";
var i = 0;
while (i < Slides.length) {
Slides[i].style.display = "none";
i++
};
console.log("Closing Index = "+SlideIndex);
});
};
});

You are getting that because of this structure:
function OpenModal(n) {
var PreviousBtn = document.getElementById("PreviousBtn");
PreviousBtn.addEventListener('click', function() {
// ...
});
var NextBtn = document.getElementById("NextBtn");
NextBtn.addEventListener('click', function() {
// ...
});
var CloseBtn = document.getElementById("CloseBtn");
CloseBtn.addEventListener('click', function() {
// ...
});
}
Each time OpenModal is called, it is adding new event listeners to PreviousBtn, NextBtn and CloseBtn. So the more you click, the more functions are to be called by the listeners.
Here is an example:
var activate = document.getElementById("activate");
activate.addEventListener("click", event => {
var submit = document.getElementById("submit");
var result = document.getElementById("result");
let i = 0;
result.textContent = "";
submit.addEventListener("click", event => {
result.textContent += ' ' + i++;
});
});
body { background: #fafafa }
#result, #hint {
font-family: fantasy;
background: #def;
padding: .5em;
}
#result {
background: #fde;
height: 3em;
}
<div id="hint">
Click on activate, then click submit many times.
<br> Click activate again and click submit again many times.
</div>
<div id="result">Result will come here.</div>
<button id="activate">Activate</button>
<button id="submit">Submit</button>
In the snippet, if you activate then submit five times, and repeat doing that four times, you get :
0 1 2 3 4
5 0 6 1 7 2 8 3 9 4
10 5 0 11 6 1 12 7 2 13 8 3 14 9 4
15 10 5 0 16 11 6 1 17 12 7 2 18 13 8 3 19 14 9 4
because every time activate is clicked, a new listener is added with a new i.
So what you should have is:
var PreviousBtn = document.getElementById("PreviousBtn");
PreviousBtn.addEventListener('click', function() {
// ...
});
var NextBtn = document.getElementById("NextBtn");
NextBtn.addEventListener('click', function() {
// ...
});
var CloseBtn = document.getElementById("CloseBtn");
CloseBtn.addEventListener('click', function() {
// ...
});
function OpenModal(n) {
// ...
}
That way, the listener is added only once.

Because you are adding every time a new listener to PreviousBtn, NextBtn and CloseBtn. You need to define the listeners them outside the OpenModal function or use every time removeEventListener (which doesn't make any sense) for every event listener you defined.
A good possible way could be this:
// Gallery Lightbox
$(document).ready(function(){
var SlideIndex = 0;
var Lightbox = document.getElementById("Lightbox");
var Modal = document.getElementById("ModalContent");
var Slides = document.getElementsByClassName("ModalSlides");
$('.GalleryImg').on('click', function() { //Attach event handler on each photo
var GalleryImgs = Array.prototype.slice.call(document.getElementsByClassName('GalleryImg')); //Turns object array to an a proper array
var ImgIndex = GalleryImgs.indexOf(this); //Position of img clicked
SlideIndex = ImgIndex; //Passes the index into the modal function
Lightbox.style.display = "block";
Slides[SlideIndex].style.display = "block";
});
var PreviousBtn = document.getElementById("PreviousBtn");
PreviousBtn.addEventListener('click', function() {
if (SlideIndex > 0) {
Slides[SlideIndex].style.display = "none";
SlideIndex --;
Slides[SlideIndex].style.display = "block";
console.log("PCurrent = "+SlideIndex);
} else {
return;
}
});
var NextBtn = document.getElementById("NextBtn");
NextBtn.addEventListener('click', function() {
if (SlideIndex < Slides.length-1) {
console.log(SlideIndex);
Slides[SlideIndex].style.display = "none";
SlideIndex ++;
Slides[SlideIndex].style.display = "block";
console.log("NCurrent = "+SlideIndex);
} else {
return;
}
});
var CloseBtn = document.getElementById("CloseBtn");
CloseBtn.addEventListener('click', function() {
Lightbox.style.display = "none";
var i = 0;
while (i < Slides.length) {
Slides[i].style.display = "none";
i++
}
console.log("Closing Index = "+SlideIndex);
});
});
/* Gallery */
.Gallery {
display: block;
position: relative;
width: 100%;
height: auto;
}
.GalleryImg {
height: auto;
width: 100%;
cursor: pointer;
opacity: 1;
transition: transform 0.5s;
transform-origin: 50% 50%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.Gallery img:hover {
transform: scale(1.07);
}
/* Lightbox */
#Lightbox {
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding-top: 5%;
z-index: 10;
background-color: rgba(0,0,0,0.7);
overflow: auto;
}
#ModalContent {
position: relative;
margin: auto;
width: 90%;
max-width: 1200px;
}
.ModalSlides {
display: none;
position: relative;
width: 100%;
height: auto;
}
#CloseBtn {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 50px;
font-weight: bold;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
z-index: 999;
}
#CloseBtn:hover,
#CloseBtn:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
#NextBtn, #PreviousBtn {
cursor: pointer;
position: absolute;
top: 60%;
width: auto;
padding: 20px;
margin-top: -75px;
color: white;
font-weight: bold;
font-size: 50px;
transition: 0.5s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
#NextBtn {
right: 0;
border-radius: 3px 0 0 3px;
}
#NextBtn:hover,
#PreviousBtn:hover {
background-color: rgba(0, 0, 0, 0.8);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Gallery">
<div class="row mt-3">
<div class="col-4">
<img class="GalleryImg" src="http://via.placeholder.com/350x150" alt="">
</div>
<div class="col-4">
<img class="GalleryImg" src="http://via.placeholder.com/380x150" alt="">
</div>
<div class="col-4">
<img class="GalleryImg" src="http://via.placeholder.com/450x150" alt="">
</div>
</div>
<div class="row mt-3">
<div class="col-4">
<img class="GalleryImg" src="http://via.placeholder.com/390x150" alt="">
</div>
<div class="col-4">
<img class="GalleryImg" src="http://via.placeholder.com/350x50" alt="">
</div>
<div class="col-4">
<img class="GalleryImg" src="http://via.placeholder.com/350x250" alt="">
</div>
</div>
</div>
<div id="Lightbox">
<span id="CloseBtn">×</span>
<div id="ModalContent">
<img class="ModalSlides" src="http://via.placeholder.com/350x150" alt="">
<img class="ModalSlides" src="http://via.placeholder.com/380x150" alt="">
<img class="ModalSlides" src="http://via.placeholder.com/450x150" alt="">
<img class="ModalSlides" src="http://via.placeholder.com/390x150" alt="">
<img class="ModalSlides" src="http://via.placeholder.com/350x50" alt="">
<img class="ModalSlides" src="http://via.placeholder.com/350x250" alt="">
<a id="PreviousBtn">❮</a>
<a id="NextBtn">❯</a>
</div>
</div>
In this way we have defined only one time the event listeners.
SlideIndex, Lightbox, Modal and Slides variables are defined at the begin.