We Keep Coding

Hide/Show div and then hide all div

I am trying to make a "meet the staff" section that has hidden bios that display on click. Right now the div displays as it should, but only disappears when the original button is clicked again. I am needing some additional javascript to hide any opened divs when a different (or same) button is clicked. I don't know enough javascript to know what to try in order to make this happen. Thanks in advance!
HTML
<div id="lastname" class="toggle-div" style="display: none;">
<div><p>bio</p>
</div>
</div>
<button class="bio-button" onclick="myBiof()">Click for Bio</button>
Javascript
<script>
function myBiof() {
var y = document.getElementById("lastname");
if (y.style.display === "block") {
y.style.display = "none";
} else {
y.style.display = "block";
}
}
</script>

You will need to add some attributes to your HTML to keep track of which item is active, what item a button controls and which ones should be hidden from screen readers. aria-controls aria-expanded and aria-hidden do just that. Once a button is clicked... if it is currently open, just close it (remove active) and toggle the appropriate attributes. If it is not open, close all of them (remove active), open the one you clicked on (add active) and toggle the appropriate attributes. Here is a simple example:
const buttons = document.querySelectorAll("button");
const people = document.querySelectorAll(".person");
const handleClick = (event) => {
const clickedBtn = event.target;
if (clickedBtn.getAttribute("aria-expanded") === "true") {
let personId = clickedBtn.getAttribute("aria-controls");
let person = document.getElementById(personId);
person.classList.remove("active");
person.setAttribute("aria-hidden", "true");
clickedBtn.setAttribute("aria-expanded", "false");
} else if (clickedBtn.getAttribute("aria-expanded") === "false") {
people.forEach(person => {
person.classList.remove("active")
person.setAttribute("aria-hidden", "true");
});
buttons.forEach(button => button.setAttribute("aria-expanded", "false"));
let personId = clickedBtn.getAttribute("aria-controls");
let person = document.getElementById(personId);
person.classList.add("active");
person.setAttribute("aria-hidden", "false");
clickedBtn.setAttribute("aria-expanded", "true");
}
}
buttons.forEach(button => button.addEventListener("click", handleClick));
button {
display: block;
background: transparent;
border: none;
border-bottom: 1px solid #000;
width: 100%;
height: 2rem;
}
.person-container {
width: 400px;
margin: 0 auto;
}
.person {
display: none;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
padding: 1rem;
}
.person h2 {
margin-top: 0px;
}
.person p {
margin-bottom: 0px;
}
.active {
display: block;
}
<div class="person-container">
<button aria-controls="person-one" aria-expanded="false">Show Person One</button>
<div id="person-one" aria-hidden="true" class="person">
<h2>Name One</h2>
<p>Person One Bio</p>
</div>
<button aria-controls="person-two" aria-expanded="false">Show Person Two</button>
<div id="person-two" aria-hidden="true" class="person">
<h2>Name Two</h2>
<p>Person Two Bio</p>
</div>
<button aria-controls="person-three" aria-expanded="false">Show Person Three</button>
<div id="person-three" aria-hidden="true" class="person">
<h2>Name Three</h2>
<p>Person Three Bio</p>
</div>
</div>

/*
Function to add all the events to the buttons.
Checking if divs are hidden or not with [data-hidden] attribute.
This HMTML attributes can be named however you want but starting
with data-
Note that this code will only work if every button
is placed in the HTML after the bio div
*/
function addEventsAndListenToThem() {
const buttons = document.querySelectorAll('.bio-button')
buttons.forEach(btn => {
btn.onclick = (e) => {
const target = e.target.previousElementSibling
// If element is hided, show it changing
// attribute data-hidden value to false
target.getAttribute('data-hidden') === 'true' ?
target.setAttribute('data-hidden', 'false') :
target.setAttribute('data-hidden', 'true')
}
})
const hide_or_show_all = document.querySelector('.bio-button-all')
// Var to check wether .bio-button-all
// has been pressed or not
var showing = false
hide_or_show_all.onclick = () => {
// Get al divs with data-hidden property
const all_bios = document.querySelectorAll('div[data-hidden]')
showing === false ? (
() => {
// Show all divs
all_bios.forEach(bio => bio.setAttribute('data-hidden', 'false'))
showing = true
}
)() :
(
// Hide all divs
() => {
all_bios.forEach(bio => bio.setAttribute('data-hidden', 'true'))
showing = false
}
)()
}
}
addEventsAndListenToThem()
/*
Display none only to [data-hidden="true"] elements
*/
[data-hidden="true"] {
display: none;
}
.bio-button,
.bio-button-all {
display: block;
margin: 10px 0px;
}
<div id="lastname" class="toggle-div" data-hidden='true'>
<div>
<p>First bio</p>
</div>
</div>
<button class="bio-button">Click for first Bio</button>
<div id="lastname" class="toggle-div" data-hidden='true'>
<div>
<p>Second bio</p>
</div>
</div>
<button class="bio-button">Click for second Bio</button>
<div id="lastname" class="toggle-div" data-hidden='true'>
<div>
<p>Third bio</p>
</div>
</div>
<button class="bio-button">Click for third Bio</button>
<button class="bio-button-all">Show/Hide all</button>

Move button when clicked

How do I move the button from the div with id of two to the div with id of one when I click the button?
<div id="one">
</div>
<div id="two">
<button onclick="moveMe"></button>
</div>
function moveMe() {
// ??
}

We can do this using removeChild and appendChild js features. Provided an example below with working code.
const one = document.getElementById("one");
const two = document.getElementById("two");
const allButtons = document.getElementsByTagName("button");
for(let i = 0; i < allButtons.length; i++) {
const btn = allButtons[i];
btn.addEventListener("click", function(e) {
const el = e.currentTarget;
const newParent = el.parentNode.id == "one" ? two : one;
el.parentNode.removeChild(el);
newParent.appendChild(el)
});
}
.section {
height: 100px;
width: 150px;
padding: 4px;
margin: 5px;
float: left;
}
#one {
background: #CCC;
}
#two {
background: #eee;
}
button {
margin: 2px;
padding: 4px;
}
<h3>Toggle button between container on click</h3>
<div>
<div class="section" id="one"></div>
<div class="section" id="two"> <button>Move me 1</button> <button>Move me 2</button></div>
</div>

function moveMe() {
const divTwo = document.getElementById("two")
const divOne = document.getElementById("one")
const newButton = document.createElement("button")
newButton.innerText = "Click me"
divOne.appendChild(newButton)
divTwo.children[1].remove()
}
<div id="one">
<p>
div one
</p>
</div>
<div id="two">
<p>
div two
</p>
<button onclick="moveMe()">Click me</button>
</div>

You can try this:
// select the elements
const button = document.querySelector('button');
const firstDiv = document.getElementById('one');
// add eventListener
button.addEventListener('click', moveButton);
// move the button
function moveButton() {
firstDiv.append(button);
}

<div id="one">
</div>
<div id="two">
<button id="btn" onclick="moveMe">MoveMe</button>
</div>
function moveMe() {
var divOne = document.querySelector("#one");
var btn = document.querySelector("#btn");
divOne.appendChild(btn);
}

You can use code below to move the element.
There's some changes that I made on your code,
you can use version 1 or version 2
the changes on first version is i add "id" attribute on the element so we don't resort to use the tag only as selector, of course you can also use #two>button to make it more precise
the changes on second version is i add a parameter to your function this time it will handle the current element using "this" keyword when calling the function
function moveMe(){
// one.appendChild(document.querySelector("button"));
one.appendChild(move);
}
function moveMeV2(element){
one.appendChild(element);
}
<div id="one">
<span>one</span>
</div>
<div id="two">
<span>two</span>
<button id="move" onclick="moveMe()">Move Me</button>
<button onclick="moveMeV2(this)">Move Me V2</button>
</div>

Two Column Accordion with Separate Full Width Divs

The intension is to have a two column accordion, without limiting the "expand" field to the left or right column. The catch is that there will be multiple on one page. This is already created, but only button 1 is working. With the way my JS is going, it will get very very repetitive - I am looking for assistance with re-writing the JS to be multiple click friendly. Fiddle: https://codepen.io/ttattini/pen/abLzaaY
EDIT: It would also be perfect if one dropdown would close as the next is opened
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="row">
<div id="column">
<button id="button">I am Button #1</button>
<button id="button">I am Button #3</button>
</div>
<div id="column">
<button id="button">I am Button #2</button>
<button id="button">I am Button #4</button>
</div>
</div>
<div id="hidden">
<p id="content"> So here I am #1</p>
</div>
<div id="hidden">
<p id="content"> So here I am #2</p>
</div>
<div id="hidden">
<p id="content"> So here I am #3</p>
</div>
<div id="hidden">
<p id="content"> So here I am #4</p>
</div>
CSS
#hidden {
background: #ccc;
margin-top: 2%;
overflow: hidden;
transition: height 200ms;
height: 0; /* <-- set this */
}
#button {
padding: 10px;
margin-top: 5px;
width:50%;
margin-left: 10%;
cursor: pointer;
}
#row {
display: flex;
}
#column {
flex: 50%;
}
JS
$(function() {
var b = $("#button");
var w = $("#hidden");
var l = $("#content");
b.click(function() {
if (w.hasClass('open')) {
w.removeClass('open');
w.height(0);
} else {
w.addClass('open');
w.height(l.outerHeight(true));
}
});
});

The biggest issue is that you're using IDs when you should be using classes. IDs must be unique to each element in a page. When you repeat an ID, JS will only target the first element using that ID. That's why only the first one is working.
The second issue is that, because of the way the script is written, it will only target a single element. What you need to do is get all the elements you want to target by something like their class name and then loop through them, applying the event listener to each one and its appropriate children.
EDIT: Here is an example from some code I wrote for a page with multiple accordions a few weeks ago in vanilla JS
//Below I establish a counting variable and find all the accordions on the page
const acc = document.getElementsByClassName( 'accordion' );
let i;
//Looping through each accordion
for ( i = 1; i <= acc.length; i++ ) {
//Identify target for the event listener. In this case, a heading for each accordion, which I've numbered e.g. "title-1"
const title = 'title-' + i;
const label = document.getElementById( title );
//Identify target content, in this case a list that has a unique ID e.g. "list-1"
const listNum = 'list-' + i;
const list = document.getElementById( listNum );
//Add event listener to heading that toggles the active classes
label.addEventListener( 'click', function() {
label.classList.toggle( 'accordion--active' );
});
}
Of course, there's more than one way to skin a cat, but this is a working example.

I have tracked the clicked event of each button and showed the corresponding hidden content with the use of data- attribute.
I have used vanilla JavaScipt instead of jQuery.
const buttons = document.querySelectorAll('.button');
const hiddens = document.querySelectorAll('.hidden');
buttons.forEach((btn) => {
btn.addEventListener('click', btnClicked)
function btnClicked(e) {
hiddens.forEach((hidden) => {
if(e.target.dataset.btn == hidden.dataset.content) {
hidden.classList.toggle('height')
} else {
hidden.classList.remove('height')
}
})
}
})
.hidden {
background: #ccc;
margin-top: 2%;
padding-left:2%;
overflow: hidden;
transition: height 200ms;
height: 0; /* <-- set this */
}
.hidden.height {
height: 50px;
}
.button {
padding: 10px;
color: white;
background-color: #2da6b5;
border: none;
margin-top: 5px;
width:90%;
margin-left: 5%;
cursor: pointer;
}
.button:hover {
filter: brightness(.9);
}
#row {
display: flex;
}
.column {
flex: 50%;
}
<div id="row">
<div class="column">
<button class="button" data-btn="one">I am Button #1</button>
<button class="button" data-btn="three">I am Button #3</button>
</div>
<div class="column">
<button class="button" data-btn="two">I am Button #2</button>
<button class="button" data-btn="four">I am Button #4</button>
</div>
</div>
<div class="hidden" data-content="one">
<p class="content"> So here I am #1</p>
</div>
<div class="hidden" data-content="two">
<p class="content"> So here I am #2</p>
</div>
<div class="hidden" data-content="three">
<p class="content"> So here I am #3</p>
</div>
<div class="hidden" data-content="four">
<p class="content"> So here I am #4</p>
</div>
Also, please do not use the same ID at multiple elements.

Javascript not creating spans as supposed to

I have a hardcoded span group to which I would like to add more spans from user input, I have tried to do this with a template and without but neither option works out for me
CSS:
.item { /*This is the style I want my new spans to inherit*/
display: flex;
align-items: center;
height: 48px;
line-height: 48px;
cursor: pointer;
padding-left: 24px;
}
.item:hover {
background-color: rgba(0, 0, 0, 0.04);
}
I'm trying to collect a user input from my modal to append it into my other spans which I hardcoded to see what it looks like for now
HTML:
<!------------------------------------------------------------- The modal from which i will be taking the input---------------------------------->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<form name="newLayerForm" onsubmit="return validateNewLayerName()" method="post" required>
<span class="close">×</span>
<p>Name your new Layer: </p>
<input placeholder="Type your desired layer name" type="text" name="newLayerName" id="newLayerName">
<button type="submit" value="submit" id="submitNewLayer" class="miro-btn miro-btn--primary miro-btn--small"
style="border: none; background-color: rgb(46,139,87); font-size: 15px; padding: 0px">Create</button>
</form>
</div>
</div>
<!----------------------------------------------------------------End of modal ------------------------------------------------------------------>
</div>
<template>
<div class="item item-layer"><span id="displayLayer"></span></div>
<span>sample layer 1</span>
<span>sample layer 2</span>
<!------------------------------------ template for the first function to add spans into ----------------->
</template>
<div class="miro-p-medium" style="font-size: 20px;">
<div class="item item-layer"><span id="displayLayer">sample layer 1</span></div>
<div class="item item-layer"><span>sample layer 2</span></div>
<div class="item item-layer"><span>sample layer 3</span></div>
<div class="item item-layer"><span>sample layer 4</span></div>
</div>
I have tried 2 ways to achieve this in my javascript code, 1 way with doing all of this inside a template and the other way to just use a div, at some point the input was being added when i appended it to body for about 1 second before disappearing, but I would also like the input from modal to inherit the same style and place in html as the 4 hardcoded spans I have right now
Javascript:
let template = document.querySelector('template').content
let layerTemplate = template.querySelector(".item-layer")
//modals
let modal = document.getElementById("myModal")
let btn = document.getElementById("btnCreate")
let span = document.getElementsByClassName("close")[0]
//function layerCreator(userInput) { // attempt with template
//let layerEl = layerTemplate.clondeNode(true)
//layerEl.querySelector("span").innerText = userInput
//document.getElementById("displayLayer").innerHTML = userInput
//return layerEl
//}
function layerCreatorX(input) { //attempt to directly insert into body
let x = document.createElement("span")
let t = document.createTextNode(input)
x.appendChild(t)
document.body.appendChild(x)
}
function validateNewLayerName() { // validates for empty input from input field
let input = document.forms["newLayerForm"]["newLayerName"].value
if (input == "" || input == null) {
alert("Cannot submit empty field, please try again!")
return false
}
else {
//this appends layer list with new layer
layerCreatorX(input)
}
}
I'm not too experienced in JS so I will be thankful for any suggestions or articles to look into
added just the most essential parts of the code, can add more if needed
Update: Forgot to include the function where i validate input from modal and use the function, it is now added in JS part

You are missing some key things:
You didn't post your validateNewLayerName function. This should return false, to avoid submitting the form.
You are not calling layerCreatorX and passing the value of newLayerName in the newLayerForm form.
You did not apply the class names item item-layer to the new span you created.
You are not adding the span to the .miro-p-medium container.
const template = document.querySelector('template').content
const layerTemplate = template.querySelector(".item-layer")
const modal = document.getElementById("myModal")
const btn = document.getElementById("btnCreate")
const span = document.getElementsByClassName("close")[0]
function validateNewLayerName() {
let input = document.forms["newLayerForm"]["newLayerName"].value
if (input == "" || input == null) {
alert("Cannot submit empty field, please try again!");
} else {
layerCreatorX(input);
}
return false; // Avoid submitting the form...
}
function layerCreatorX(input) {
const x = document.createElement("span");
const t = document.createTextNode(input);
x.className = 'item item-layer'; // Add the appropriate class.
x.appendChild(t);
document.querySelector('.miro-p-medium').appendChild(x);
// Let the modal window know that is can be closed now...
}
.item {
display: flex;
align-items: center;
height: 48px;
line-height: 48px;
cursor: pointer;
padding-left: 24px;
}
.item:hover {
background-color: rgba(0, 0, 0, 0.04);
}
.modal {
position: absolute;
border: thin solid grey;
background: #FFF;
padding: 0.5em;
right: 4em;
}
<div id="myModal" class="modal">
<div class="modal-content">
<form name="newLayerForm"
onsubmit="return validateNewLayerName()"
method="post" required>
<span class="close">×</span>
<p>Name your new Layer: </p>
<input type="text" id="newLayerName" name="newLayerName"
placeholder="Type your desired layer name">
<button type="submit" id="submitNewLayer" value="submit"
class="miro-btn miro-btn--primary miro-btn--small"
style="border: none; background-color: rgb(46,139,87); font-size: 15px; padding: 0px">Create</button>
</form>
</div>
</div>
<template>
<div class="item item-layer">
<span id="displayLayer"></span>
</div>
<span>sample layer 1</span>
<span>sample layer 2</span>
</template>
<div class="miro-p-medium" style="font-size: 20px;">
<div class="item item-layer"><span id="displayLayer">sample layer 1</span></div>
<div class="item item-layer"><span>sample layer 2</span></div>
<div class="item item-layer"><span>sample layer 3</span></div>
<div class="item item-layer"><span>sample layer 4</span></div>
</div>

Creating a function for a button that can be used for a certain class using JavaScript

Ultimately, my objective here is to create a JS script where I can use for my quizzes. In a page, I may put more than one item. In this regard, I will have more than one button, one button per item. What you see here is a prototype. (I wanted to see how each element interacts with one another.) In the process of trying to get it work, I looked over what others have done. However, I came to a point where I am stuck and could not see what I am doing wrong. I have a sense of where the problem is but I am not certain of it. Anyway, please see where my mistakes are and let me know.
This is the html part. What I want to happen here is I click the top button and the background of the text, "Hello" at top turns red. I press the middle and the text background turn red, and so on. Currently, I press any button and they all turn red.
<div class="q">
<div class="p">
<p>Hello</p>
</div>
<button>Show Answer</button>
</div>
<div class="q">
<div class="p">
<p>Hello</p>
</div>
<button>Show Answer</button>
</div>
<div class="q">
<div class="p">
<p>Hello</p>
</div>
<button>Show Answer</button>
</div>
The link to the js script is located in the head section.
<script src="../js/s3.js"></script>
Here is the js. I suspect my mistake is in the second half. The reason for this is that I made the var in the second for the same as in the first one and still got the same result. It made me wonder whether if the computer is ignoring this part. I could be wrong. I tried querySelectorAll and the result is the same as well. By the way, when is it advantageous to use querySelectorAll and getElementsByClassName if class is involved?
window.onload = function () {
let c = document.getElementsByClassName('q');
for (var ii = 0; ii < c.length; ii++) {
c[ii].addEventListener('click', function () {
let a = document.getElementsByClassName('p');
for (var i = 0; i < a.length; i++) {
a[i].classList.add('cellRed');
}
});
}
}
Here is the CSS.
.cellGreen {
background-color: green;
color: white;
}
.cellRed {
background-color: red;
color: white;
}
I was told to keep things separate. So I did.

First thing you should do when tackling a problem is to think about what you're trying to accomplish. It really does help to list it in steps.
In every Question div
Get the Button
Get the Paragraph
When the Button is clicked
Turn the Paragraph Red
This allows us to build our code rather simply from step 1 onward. This isn't always perfect, but it is always helpful.
Get All Questions
let questions = document.querySelectorAll(".q");
For Each Question
questions.forEach(question => {
// ... do something
});
Get the Button
questions.forEach(question => {
let btn = question.querySelector("button");
});
Get the Paragraph
questions.forEach(question => {
let btn = question.querySelector("button");
let p = question.querySelector("p");
});
When the Button is Clicked
questions.forEach(question => {
let btn = question.querySelector("button");
let p = question.querySelector("p");
btn.addEventListener("click", function() {
// ... do something
});
});
Turn the Paragraph Red
questions.forEach(question => {
let btn = question.querySelector("button");
let p = question.querySelector("p");
btn.addEventListener("click", function() {
p.classList.add("cellRed");
});
});
Final Example:
window.onload = function() {
let questions = document.querySelectorAll(".q");
questions.forEach(question => {
let btn = question.querySelector("button");
let p = question.querySelector("p");
btn.addEventListener("click", function() {
p.classList.add('cellRed');
});
})
}
.cellGreen {
background-color: green;
color: white;
}
.cellRed {
background-color: red;
color: white;
}
<div class="q">
<div class="p">
<p>Hello</p>
</div>
<button>Show Answer</button>
</div>
<div class="q">
<div class="p">
<p>Hello</p>
</div>
<button>Show Answer</button>
</div>
<div class="q">
<div class="p">
<p>Hello</p>
</div>
<button>Show Answer</button>
</div>

That second loop is unnecessary. Just use let instead of var in first loop.
According to MDN:
let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. This is unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope.
Look at example below:
window.onload = function () {
let c = document.getElementsByClassName('q');
for (let i = 0; i < c.length; i++) {
c[i].addEventListener('click', function () {
let a = document.getElementsByClassName('p');
a[i].classList.add('cellRed');
});
}
}
.cellGreen {
background-color: green;
color: white;
}
.cellRed {
background-color: red;
color: white;
}
<div class="q">
<div class="p">
<p>Hello</p>
</div>
<button>Show Answer</button>
</div>
<div class="q">
<div class="p">
<p>Hello</p>
</div>
<button>Show Answer</button>
</div>
<div class="q">
<div class="p" >
<p>Hello</p>
</div>
<button>Show Answer</button>
</div>`

I know you want help with your javascript code, but others have already helped you, so I mostly wanted to show that this can be solved with pure CSS only without javascript. :) I'm basically using radio-buttons and sibling selector.
div.p > p {
margin-bottom: 0;
}
div.p > input {
display: none;
}
div.p > label {
cursor: pointer;
font-size: 90%;
margin-right: 1rem;
}
div.p > input:checked ~ p {
color: white;
background-color: red;
}
div.p > input:checked[value="correct"] ~ p {
background-color: green;
}
<div class="q">
<div class="p">
<input type="radio" name="q1" id="q1_alt1" value="correct" />
<input type="radio" name="q1" id="q1_alt2" />
<p>Hello</p>
<label for="q1_alt1">Answer 1</label>
<label for="q1_alt2">Answer 2</label>
</div>
</div>
<div class="q">
<div class="p">
<input type="radio" name="q2" id="q2_alt1" />
<input type="radio" name="q2" id="q2_alt2" value="correct" />
<p>Hello</p>
<label for="q2_alt1">Answer 1</label>
<label for="q2_alt2">Answer 2</label>
</div>
</div>
<div class="q">
<div class="p">
<input type="radio" name="q3" id="q3_alt1" />
<input type="radio" name="q3" id="q3_alt2" />
<input type="radio" name="q3" id="q3_alt3" value="correct" />
<p>Hello</p>
<label for="q3_alt1">Answer 1</label>
<label for="q3_alt2">Answer 2</label>
<label for="q3_alt3">Answer 3</label>
</div>
</div>