I have four div with image and I want to add a class .open when clicked on the panel and remove this class from last div when clicked on another div.
<div class="panel panel1">
image..
</div>
<div class="panel panel2">
image..
</div>
<div class="panel panel3">
image..
</div>
<div class="panel panel4">
image..
</div>
<div class="panel panel5">
image..
</div>
Qhen we add open class list this image container grows 5 time so, I want to remove this class when click on other image container:
.panel.open {
font-size: 40px;
flex: 5;
}
const panel = document.querySelectorAll(".panel");
function toggleOpen() {
this.classList.toggle("open");
}
function toggelActive() {
this.classList.add("open-active");
}
panel.forEach((panel) => panel.addEventListener("click", toggleOpen));
panel.forEach((panel) => panel.addEventListener("transitionend", toggelActive));
when you use querySelectorAll the result you will get will be a NodeList, you can access the elements via index and change them.
const divs = document.querySelectorAll("div");
console.log(divs[divs.length - 1]);
divs[divs.length - 1].classList.add("active");.active {
font-size: 30px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script src="./script.js"></script>
</body>
</html>If you give a more detailed description of the logic you want to implement, maybe I can help you better.
Remembering that to access the first element the index is 0
You could use a for loop to loop over all panels remove the 'open' class and then add it to the clicked panel:
const panel = document.querySelectorAll(".panel");
function toggleOpen() {
// For loop
for (let i = 0; i < panel.length; i++) {
panel[i].classList.remove("open");
}
this.classList.add("open");
}
function toggelActive() {
this.classList.add("open-active");
}
panel.forEach((panel) => panel.addEventListener("click", toggleOpen));
panel.forEach((panel) => panel.addEventListener("transitionend", toggelActive));<div class="panel panel1">
image..
</div>
<div class="panel panel2">
image..
</div>
<div class="panel panel3">
image..
</div>
<div class="panel panel4">
image..
</div>
<div class="panel panel5">
image..
</div>I think you could give us more details, but if you just want to close an image when you open another one, you can just remove all "open" classes from your panels, like:
const panel = document.querySelectorAll(".panel");
function toggleOpen(element) {
element.classList.toggle("open");
}
function toggelActive(element) {
element.classList.add("open-active");
}
/**
* Remove all open classes from your panel
*/
function removeAll() {
panel.forEach((panel) => {
panel.classList.remove("open", "open-active")
})
}
panel.forEach((panel) => panel.addEventListener("click", event => {
/* First remove all classes */
removeAll();
toggleOpen(event.target)
}));
panel.forEach((panel) => panel.addEventListener("transitionend", event => {
/* First remove all classes */
removeAll();
toggelActive(event.target)
}));