We Keep Coding

How to close a dropdown menu when another one is opening

I can't figure out how to close one submenu when another one is open. I'm not sure if html is needed here, so I'm just attaching JS code here:
const burgerBtn = document.querySelector(".header__burger"),
menu = document.querySelector(".menu"),
body = document.querySelector(".body"),
filter = document.querySelector(".filter"),
blockFilter = document.querySelectorAll(".block-filter"),
dropdown = document.querySelectorAll(".block-filter__dropdown");
if (filter) {
blockFilter.forEach(item => {
item.addEventListener("click", event => {
item.querySelector(".block-filter__dropdown").classList.toggle("block-filter__dropdown_state_active");
item.querySelector(".block-filter__icon").classList.toggle("block-filter__icon_state_active");
if (event.target.classList.contains("block-filter__item")) {
item.querySelector(".block-filter__value").textContent = event.target.textContent;
}
})
})
}
<div class="filter hero__filter">
<form class="filter__form">
<div class="filter__block block-filter">
<div class="block-filter__button">
<div class="block-filter__header">
<span class="block-filter__type">Purpose</span>
<div class="block-filter__icon"></div>
</div>
<span class="block-filter__value">Buy</span>
</div>
<div class="block-filter__dropdown">
<span class="block-filter__item">Buy</span>
<span class="block-filter__item">Sell</span>
</div>
</div>

Sure, just remove the class from the active one first:
item.addEventListener("click", (event) => {
// get active, and if it exists, remove active
document.querySelector(".block-filter__dropdown_state_active")?.classList.remove("block-filter__dropdown_state_active");
item.querySelector(".block-filter__dropdown").classList.toggle(
"block-filter__dropdown_state_active"
);
item.querySelector(".block-filter__icon").classList.toggle(
"block-filter__icon_state_active"
);
if (event.target.classList.contains("block-filter__item")) {
item.querySelector(".block-filter__value").textContent =
event.target.textContent;
}
});
We use ?. here to prevent us from going further (and causing an error) if there is no active dropdown already.

What you need to do is look for a currently active item first and "de-activate" them. You should also check that the currently active item is not the clicked item as you already have logic defined for that.
I've expanded on your snippet to create a solution.
NOTE: It might be useful creating a separate function/s for handling to "activate" and "de-activate" code where you pass in a .block-filter element.
const burgerBtn = document.querySelector(".header__burger"),
menu = document.querySelector(".menu"),
body = document.querySelector(".body"),
filter = document.querySelector(".filter"),
blockFilter = document.querySelectorAll(".block-filter"),
dropdown = document.querySelectorAll(".block-filter__dropdown");
if (filter) {
blockFilter.forEach(item => {
item.addEventListener("click", event => {
const active_dropdown = document.querySelector(".block-filter__dropdown_state_active");
if(active_dropdown !== null){
// get parent until we find ".block-filter"
const active_item = active_dropdown.closest(".block-filter");
// check it's not the current item
if(active_item !== null && active_item !== item){
// apply same logic as below to remove active state
active_item.querySelector(".block-filter__dropdown").classList.remove("block-filter__dropdown_state_active");
active_item.querySelector(".block-filter__icon").classList.remove("block-filter__icon_state_active");
}
}
// your original logic
item.querySelector(".block-filter__dropdown").classList.toggle("block-filter__dropdown_state_active");
item.querySelector(".block-filter__icon").classList.toggle("block-filter__icon_state_active");
if (event.target.classList.contains("block-filter__item")) {
item.querySelector(".block-filter__value").textContent = event.target.textContent;
}
})
})
}
/* base styles */
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
background-color: #f3f3f3;
}
.filter.hero__filter {
width:600px;
margin:auto;
border: 2px solid #eee;
background-color: #fff;
}
.filter__form {
display:flex;
}
.filter__block {
flex: 1;
padding: 5px;
position: relative;
}
.block-filter__header {
font-weight:600;
font-size:12px;
color: #555;
}
.block-filter__dropdown {
display:none;
position:absolute;
top:100%;
left:0;
right:0;
background-color:#fff;
border: 1px solid #ccc;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
border-radius:4px;
}
.block-filter__dropdown_state_active {
display: block;
}
.block-filter__item {
padding: 5px 10px;
display:block;
border-bottom: 1px solid #eee;
}
.block-filter__item:last-child {
border-bottom: none;
}
<div class="filter hero__filter">
<form class="filter__form">
<div class="filter__block block-filter">
<div class="block-filter__button">
<div class="block-filter__header">
<span class="block-filter__type">Purpose</span>
<div class="block-filter__icon"></div>
</div>
<span class="block-filter__value">Buy</span>
</div>
<div class="block-filter__dropdown">
<span class="block-filter__item">Buy</span>
<span class="block-filter__item">Sell</span>
</div>
</div>
<div class="filter__block block-filter">
<div class="block-filter__button">
<div class="block-filter__header">
<span class="block-filter__type">Second</span>
<div class="block-filter__icon"></div>
</div>
<span class="block-filter__value">Alpha</span>
</div>
<div class="block-filter__dropdown">
<span class="block-filter__item">Bravo</span>
<span class="block-filter__item">Charlie</span>
<span class="block-filter__item">Delta</span>
</div>
</div>
</form>
</div>

I want to change the color of the first Button, when I clicked on the second

I am very new to coding. I found a inspiration and started making my website. I made a logo and 2 buttons, Shots and Designers. When I click on the first and the second button, they both change their color to white, but thats not what I want. I want that when I click on the second button, the first button change this color to start color (grey).I mean if button 2 clicked, change button 1 color to grey.
Here is my code:
<head>
<title>Richis corner</title>
</head>
<head>
<style>
.rectangle {
height: 85px;
width: 4500px;
background-color: #242526;
margin-top: -43px;
margin-left: -8px;
}
.image {
margin-top: -147px;
margin-left: -50px;
}
.button1 {
font-family: Helvetica;
background: none;
color: grey;
border: none;
font-size: 18px;
outline: none;
}
</style>
</head>
<body>
<div class="rectangle"></div>
<img src=https://i.yapx.ru/Koe4kb.png" class="image">
<button style="margin:-37px -25px;position: absolute;" class="button1" id="demo" onclick="myButton()">
Shots</button>
<button style="margin:-37px 50px;position: absolute;" class="button1" id="demo2"
onclick="mysecondButton()"> Designers</button>
<script>
function myButton() {
document.getElementById("demo").style.color = "white";
}
function mysecondButton() {
document.getElementById("demo2").style.color = "white";
}
</script>
</body>```

Here is your change
<script>
function myButton() {
document.getElementById("demo").style.color = "white";
}
function mysecondButton() {
document.getElementById("demo").style.color = "grey";
}
</script>

function myButton() {
document.getElementById("demo").style.color = "white";
}
function mysecondButton() {
document.getElementById("demo").style.color = "grey";
}

Replace CHOOSE FILE with an image

Hi I am trying to replace the choose file button with an image. I am using javascript to create the button but when I am inspecting the website, it shows me a html script of the button which is of type= file.
To create it, I used:
input = createFileInput(handleFile);
input.elt.style["width"] = "40%";
input.elt.style["font-size"]="3vmin";
function handleFile(file) {
print(file);
if (file.type === 'image') {
imgFile = file.data;
img = createImg(file.data);
img.hide();
canvas.image(img, 0, 0, 224, 224);
image(img, 0, 0, width, height/2);
img.remove();
}
mode = 1;
tint = false;
}
Can anyone suggest how I can change the generic button with an image.

I think you can cheat and position an image over the input, then add a click handler to the image and pass it through to the input button below.
Is this what you are trying to achieve?
const input = document.querySelector("#avatar");
const button = document.querySelector("#button");
button.addEventListener('click', event => input.click(event));
.body {
font-family: sans-serif;
}
label {
display: inline-block;
padding: 1em 0;
}
.wrapper {
position: relative;
}
#avatar {
display: block;
height: 50px;
border: 1px solid #333;
}
#button {
position: absolute;
left: 1px;
top: 1px;
}
<div class="body">
<label for="avatar">Choose a profile picture:</label>
<div class="wrapper">
<input type="file" id="avatar" name="avatar">
<img id="button" src="https://via.placeholder.com/75x50/333333/ffffff?text=Avatar"></img>
</div>
</div>

Dynamic way to hide divs vanilla javascript

Is there a more dynamic way to hide/show divs that are identical in structure with no identifiers?
Click to show
I'm some stuff
<div class="setup" onclick="show(1)">
Click to show
<p class="hidden">
I'm more stuff
</p>
</div>
function show(elem) {
var p = document.getElementsByClassName("hidden");
if (p[elem] != undefined) {
if (p[elem].style.display == "none") {
p[elem].style.display = "block";
} else {
p[elem].style.display = "none";
}
}
}
http://jsfiddle.net/ba7yfmz6/29/

Use this:
<div class="setup" onclick="show(this)">
JavaScript:
function show(elem) {
var paragraph = elem.querySelector(".hidden");
if (paragraph.style.display == "none") {
paragraph.style.display = "block";
} else {
paragraph.style.display = "none";
}
Hopefully this helps!

Yes, there is a way!
You can get all your elements, iterate them via forEach and assign your function to their onclick property:
document.querySelectorAll('.setup').forEach(div => {
div.onclick = showElem;
});
Doing this, you can get rid of the onlick on your HTML elements.
To get their child element (the one you want to hide / show, obviously), your show() function can look like this:
function show() {
const hidden = this.getElementsByClassName('hidden')[0];
if (hidden.style.display == 'none') {
hidden.style.display = 'block';
} else {
hidden.style.display = 'none';
}
}
And all together:
document.querySelectorAll('.setup').forEach(div => {
div.onclick = show;
});
function show() {
const hidden = this.getElementsByClassName('hidden')[0];
if (hidden.style.display == 'none') {
hidden.style.display = 'block';
} else {
hidden.style.display = 'none';
}
}
.setup {
border-top: solid #ccc 3px;
border-bottom: solid #ccc 3px;
margin-bottom: 5%;
}
.setup:hover {
cursor: pointer;
}
.hidden {
text-align: center;
font-weight: bold;
border-top: solid black 3px;
border-bottom: solid black 3px;
background-color: yellow;
display: none;
}
<div class="setup">
Click to show
<p class="hidden">
I'm some stuff
</p>
</div>
<div class="setup">
Click to show
<p class="hidden">
I'm more stuff
</p>
</div>
JS Fiddle: http://jsfiddle.net/ba7yfmz6/38/
More info:
forEach
querySelectorAll()

You can use this.
Also, since the div doesn't have a style attribute, checking for style.display === 'none' would always be false on the first click; it would set the the style.display to none. Checking for the computed style would show the hidden element on first click.
function show(el) {
const toggle = el.querySelector('.hidden');
toggle.style.display = window.getComputedStyle(toggle).display === 'none' ? 'block' : 'none';
}
.setup {
border-top: solid #ccc 3px;
border-bottom: solid #ccc 3px;
margin-bottom: 5%;
}
.setup:hover {
cursor: pointer;
}
.hidden {
text-align: center;
font-weight: bold;
border-top: solid black 3px;
border-bottom: solid black 3px;
background-color: yellow;
display: none;
}
<div class="setup" onclick="show(this)">
Click to show
<p class="hidden">
I'm some stuff
</p>
</div>
<div class="setup" onclick="show(this)">
Click to show
<p class="hidden">
I'm more stuff
</p>
</div>

<div class="setup" onclick="show(this)">
Then the JavaScript:
function show(that) {
var hiddenElements = that.getElementsByClassName('hidden');
for (var i = 0; i < hiddenElements.length; i++) {
var style = hiddenElements[i].style;
style.display = style.display == "block" ? "none" : "block";
}
}

Why is this code using .parentNode not working?

Here is the method I’m trying to make. Basically what it’s supposed to do is, when an <input> with the type of button is clicked, it makes the next <div> (in this case hard-coded) go from display: none to display: block. However it’s not working.
matchDivs() {
let showInputs = document.querySelectorAll('input')
const inputs = Array.from(showInputs)
inputs.map(input => {
if (input.parentNode.getAttribute('class') === 'first-employee') {
document.querySelector('.second-employee').setAttribute('style', 'display: block')
}
return input
})
}

When you use if (node.getAttribute('class') === 'first-employee') this is return:
class='first-employee' // true
class='employee first-employee' // false
You must use:
if (node.classList.contains("first-employee")):
class='first-employee' // true
class='employee first-employee' // true

If I have understand your question properly that on button click you want to show/hide DIV tag next to it, which is inside common parent div for both, button and 'second-employee'.
I think below will be helpful.
// For single Div show/hide on button click
let btnMatchDiv = document.querySelector('#btnMatchDivs');
btnMatchDiv.addEventListener('click', matchDivs, true);
function matchDivs() {
let showInputs = document.querySelectorAll('input')
const inputs = Array.from(showInputs)
inputs.map(input => {
// Method 1
// ===========================
/*if (input.parentNode.getAttribute('class') === 'first-employee') {
document.querySelector('.second-employee').setAttribute('style', 'display: block')
}*/
// Method 2 : you can use new classList method
// ===========================
if (input.parentNode.classList.contains('first-employee')) {
input.nextElementSibling.classList.toggle('hidden');
}
//return input
})
}
body {
font-family: Arial;
}
.first-employee {
display: block;
padding: 1em;
border: 1px solid green;
}
.second-employee {
padding: 1em;
border: 1px solid red;
}
#btnMatchDivs {
padding: 1em 0.5em;
border: 1px solid #777;
}
.hidden {
display: none
}
<div class="first-employee">
<h2>
First Employee
</h2>
<input type="button" id="btnMatchDivs" value="Toggle Second Employee" />
<div class="second-employee hidden">
Second Employee
</div>
</div>
Please let me know if you need further help on this.
Thanks,
Jignesh Raval

Also if you want to toggle multiple items then you can try below code.
// For multiple Div show/hide on button click
// ===================================
let showInputs = document.querySelectorAll('input')
const btnInputs = Array.from(showInputs)
// Bind click event to each button input
btnInputs.map(input => {
input.addEventListener('click', matchDivs, false);
})
function matchDivs(event) {
let buttonEle = event.currentTarget;
if (buttonEle.parentNode.classList.contains('first-employee')) {
buttonEle.nextElementSibling.classList.toggle('hidden');
}
}
body {
font-family: Arial;
}
.first-employee {
display: block;
padding: 1em;
border: 1px solid green;
margin-bottom: 1em;
}
.second-employee {
margin: 1em 0;
padding: 1em;
border: 1px solid red;
}
#btnMatchDivs {
padding: 1em 0.5em;
border: 1px solid #777;
}
.hidden {
display: none
}
<div class="first-employee">
<h2>
First Employee 1
</h2>
<input type="button" id="btnMatchDivs" value="Match Divs" />
<div class="second-employee hidden">
Second Employee 1
</div>
</div>
<div class="first-employee">
<h2>
First Employee 2
</h2>
<input type="button" id="btnMatchDivs" value="Match Divs" />
<div class="second-employee hidden">
Second Employee 2
</div>
</div>
<div class="first-employee">
<h2>
First Employee 3
</h2>
<input type="button" id="btnMatchDivs" value="Match Divs" />
<div class="second-employee hidden">
Second Employee 3
</div>
</div>
I hope this will be helpful.
Thanks,
Jignesh Raval