We Keep Coding

How to make the first item in the list give room for the second item and so on?

I created a button that when clicked creates an item on the list div. In the list div 'Total:' is hard coded. I want the total to go down whenever an item is created so that the item takes its place and the total can be shown at the bottom. But the problem total will remain in its place, and the item will be created beneath it. How can I change that from happening?
Here's the code(trial):
const btn = document.querySelector(".btn");
const itemList = document.querySelector(".item-list");
btn.addEventListener('click', function(e) {
const para = document.createElement('div');
para.classList.add('item-list');
para.innerHTML = `<p class="item">Potato Chips</p>`
itemList.appendChild(para);
})
.list-container {
height: 500px;
width: 300px;
background-color: cadetblue;
}
header {
background-color: burlywood;
border-style: groove;
}
.btn {
margin-bottom: 20px;
}
<div class="list-container">
<header>
<h4>List Time</h4>
<button class="btn">click</button>
</header>
<div class="item-list">
<div>
<p>Total: </p>
</div>
</div>
</div>

You can use insertBefore instead of appendChild
(Or prepend as suggested by Titus in the comments).
I'll use insertBefore in my example.
const btn = document.querySelector(".btn");
const itemList = document.querySelector(".item-list");
const totalEl = document.getElementById('total'); // added id on the element I want to insert items before
btn.addEventListener('click', function(e) {
const para = document.createElement('div');
para.classList.add('item-list');
para.innerHTML = `<p class="item">Potato Chips</p>`
itemList.insertBefore(para, totalEl);
})
.list-container {
height: 500px;
width: 300px;
background-color: cadetblue;
}
header {
background-color: burlywood;
border-style: groove;
}
.btn {
margin-bottom: 20px;
}
<div class="list-container">
<header>
<h4>List Time</h4>
<button class="btn">click</button>
</header>
<div class="item-list">
<div id="total">
<p>Total: </p>
</div>
</div>
</div>

Use "prepend" instead of "appendChild", as "prepend" will insert before the element, but append will insert after.
const btn = document.querySelector(".btn");
const itemList = document.querySelector(".item-list");
btn.addEventListener('click', function(e) {
const para = document.createElement('div');
para.classList.add('item-list');
para.innerHTML = `<p class="item">Potato Chips</p>`
itemList.prepend(para);
})
.list-container {
height: 500px;
width: 300px;
background-color: cadetblue;
}
header {
background-color: burlywood;
border-style: groove;
}
.btn {
margin-bottom: 20px;
}
<div class="list-container">
<header>
<h4>List Time</h4>
<button class="btn">click</button>
</header>
<div class="item-list">
<div>
<p>Total: </p>
</div>
</div>
</div>

Hide and show DIV with javascript parameter

I am trying to do an event for hide and show with pure Javascript string parameters. I want to hide the other div once one of them is displayed (Let's say there are multiple div).
I tried to do it my own but I only managed to display once clicked. I had no idea how to hide the rest and only show that specified div.
Below is my code:
function show(id) {
if (document.getElementById('div_'+id).style.display == 'none') {
document.getElementById('div_'+id).style.display = 'block';
}
return false;
}
.title {
border:1px solid red;
display: inline-block;
font-size: 16px;
}
.content {
border: 1px solid blue;
display: inline-block;
font-size: 16px;
width: 300px;
}
<div class="title" onclick="show('first');">Title 1</div>
<div class="content" id="div_first" style="display:none;">Content 1
</div>
<div class="title" onclick="show('sec');">Title 2</div>
<div class="content" id="div_sec" style="display:none;">Content 2
</div>

You can use data-* attribute to store the target selector.
Don't use inline on* handlers. Keep your JS in one place.
Use CSS .is-active to manipulate the visibility state like display: block;
const showBtn = document.querySelectorAll('[data-show]');
const content = document.querySelectorAll('.content');
function show(ev) {
const selector = ev.currentTarget.getAttribute('data-show');
const elToShow = document.querySelectorAll(selector);
content.forEach(el => el.classList.remove('is-active'));
elToShow.forEach(el => el.classList.add('is-active'));
}
showBtn.forEach(el => el.addEventListener('click', show));
.title {
border:1px solid red;
display: inline-block;
font-size: 16px;
}
.content {
border: 1px solid blue;
display: inline-block;
font-size: 16px;
width: 300px;
display: none; /* ADD THIS */
}
.content.is-active{ /* ADD THIS */
display: block;
}
<div class="title" data-show="#content-1">Title 1</div>
<div class="title" data-show="#content-2">Title 2</div>
<div class="content" id="content-1">Content 1</div>
<div class="content" id="content-2">Content 2</div>

Just keep track of the id or element that is being displayed so that you can hide it if another one is selected. There's no need to iterate over them to hide them all, as you will know which one is being displayed, or to query the DOM each time to get the current one, as you can just keep a reference to it the first time.
I have updated the logic to toggle them if you click the same one twice and removed the inline event listeners, which I've moved to JS.
Note I have also replaced the <div>s for the .title elements with <button>s, as they will work better with keyboard navigation, mouse events and screen readers. You could also use <a>s instead.
let currentContentTab = null;
function show(e) {
// Using e.target you can get a reference to the clicked button:
const contentTab = document.getElementById(`div${ e.target.id.substring(3) }`);
const isHidden = contentTab.style.display === 'none';
// Toggle the panel we have just clicked (assuming you want to allow closing all of them again):
contentTab.style.display = isHidden ? 'block' : 'none';
// Hide the previous one, if any:
if (currentContentTab) {
currentContentTab.style.display = 'none';
}
// Keep track of the one we are currently displaying:
currentContentTab = isHidden ? contentTab : null;
}
// No need to have inline JS, you can bind the event listeners from JS:
for (const button of document.querySelectorAll('.title')) button.onclick = show;
body {
font-family: monospace;
font-size: 16px;
}
.title {
font-family: monospace;
font-size: 16px;
border: 1px solid red;
background: transparent;
padding: 8px;
outline: none;
}
.content {
border: 1px solid blue;
width: 300px;
padding: 8px;
margin-top: 8px;
}
<button class="title" id="tab1">Title 1</button>
<button class="title" id="tab2">Title 2</button>
<button class="title" id="tab3">Title 3</button>
<button class="title" id="tab4">Title 4</button>
<div class="content" id="div1" style="display:none; ">
Content 1...
</div>
<div class="content" id="div2" style="display:none; ">
Content 2...
</div>
<div class="content" id="div3" style="display:none; ">
Content 3...
</div>
<div class="content" id="div4" style="display:none; ">
Content 4...
</div>
If accessibility is important for you, you might want to add some ARIA attributes and the HTML hidden attribute:
let currentTab = null;
let currentPanel = null;
function show(e) {
const tab = e.target;
const id = tab.getAttribute('aria-controls');
const panel = document.getElementById(id);
// Toggle the panel we have just clicked:
tab.toggleAttribute('aria-selected');
panel.toggleAttribute('hidden');
// Hide the previous one, if any:
if (currentTab) {
currentTab.removeAttribute('aria-selected');
currentPanel.setAttribute('hidden', true);
}
// Keep track of the one we are currently displaying:
if (currentTab === tab) {
currentTab = null;
currentPanel = null;
} else {
currentTab = tab;
currentPanel = panel;
}
}
for (const button of document.querySelectorAll('.title')) button.onclick = show;
body {
font-family: monospace;
font-size: 16px;
}
.title {
font-family: monospace;
font-size: 16px;
border: 1px solid red;
background: transparent;
padding: 8px;
outline: none;
}
.content {
border: 1px solid blue;
width: 300px;
padding: 8px;
margin-top: 8px;
}
<button class="title" role="tab" aria-selected="true" aria-controls="div1" id="tab1">Title 1</button>
<button class="title" role="tab" aria-selected="true" aria-controls="div2" id="tab2">Title 2</button>
<button class="title" role="tab" aria-selected="true" aria-controls="div3" id="tab3">Title 3</button>
<button class="title" role="tab" aria-selected="true" aria-controls="div4" id="tab4">Title 4</button>
<div class="content" id="div1" role="tabpanel" aria-labelby aria-labelledby="tab1" hidden>
Content 1...
</div>
<div class="content" id="div2"role="tabpanel" aria-labelby aria-labelledby="tab2" hidden>
Content 2...
</div>
<div class="content" id="div3"role="tabpanel" aria-labelby aria-labelledby="tab3" hidden>
Content 3...
</div>
<div class="content" id="div4"role="tabpanel" aria-labelby aria-labelledby="tab4" hidden>
Content 4...
</div>

This JS code will grab all .content divs and will hide them unless it's the one we clicked.
function show(id) {
const el = document.getElementById('div' + id);
if (el.style.display == 'none') {
el.style.display = 'block';
}
const otherEls = document.querySelectorAll('.content');
otherEls.forEach(function (elItem) {
if (el !== elItem) {
elItem.style.display = 'none';
}
});
return false;
}

My solution as the following:
function show(id)
{
var divs=document.getElementsByClassName("content");
for (i=0;i<divs.length;i++)
{
divs[i].style.display='none';
}
document.getElementById('div_'+id).style.display = 'block';
}
.title {
border:1px solid red;
display: inline-block;
font-size: 16px;
}
.content {
border: 1px solid blue;
display: inline-block;
font-size: 16px;
width: 300px;
}
<div class="title" onclick="show('first');">Title 1</div>
<div class="content" id="div_first" style="display:none;">Content 1
</div>
<div class="title" onclick="show('sec');">Title 2</div>
<div class="content" id="div_sec" style="display:none;">Content 2
</div>

Hide div when other div is showing

I am building a page with 3 buttons, each opening a different div-element. What I want, is to show just one div at the time. So when one div is opened, the other div should close.
I managed to create the buttons each opening a different div-element. But I cannot figure out a way to automatically close the div when other div is opened.
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
var button3 = document.getElementById("button3");
var content1 = document.getElementById("content1");
var content2 = document.getElementById("content2");
var content3 = document.getElementById("content3");
content1.style.display = "none";
content2.style.display = "none";
content3.style.display = "none";
button1.addEventListener("click", showContent1);
button2.addEventListener("click", showContent2);
button3.addEventListener("click", showContent3);
function showContent1() {
if (content1.style.display !== "none") {
content1.style.display = "none"
} else {
content1.style.display = "block";
}
}
function showContent2() {
if (content2.style.display !== "none") {
content2.style.display = "none"
} else {
content2.style.display = "block";
}
}
function showContent3() {
if (content3.style.display !== "none") {
content3.style.display = "none"
} else {
content3.style.display = "block";
}
}
#button1,
#button2,
#button3 {
width: 50px;
height: 50px;
background: lightblue;
margin: 5px;
cursor: pointer;
}
#content1,
#content2,
#content3 {
width: 100px;
height: 50px;
background: blue;
color: white;
margin: 5px;
}
<div id="button1">button 1</div>
<div id="button2">button 2</div>
<div id="button3">button 3</div>
<div id="content1">content 1</div>
<div id="content2">content 2</div>
<div id="content3">content 3</div>

You can cut down your code to something like this:
$("[id^=button]").click(function() {
var id = $(this).attr("id").replace("button", "")
$("#content" + id).toggle();
});
The code below will only allow 1 div to show at the time.
$("[id^=button]").click(function() {
var id = $(this).attr("id").replace("button", "");
$("[id^=content]").hide()
$("#content" + id).show();
});
Here we are using the ^ to say that we want all element starting with button to trigger the click event.
Demo
$("[id^=button]").click(function() {
var id = $(this).attr("id").replace("button", "")
$("#content" + id).toggle();
});
#button1,
#button2,
#button3 {
width: 50px;
height: 50px;
background: lightblue;
margin: 5px;
cursor: pointer;
}
#content1,
#content2,
#content3 {
width: 100px;
height: 50px;
background: blue;
color: white;
margin: 5px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="button1">button 1</div>
<div id="button2">button 2</div>
<div id="button3">button 3</div>
<div id="content1">content 1</div>
<div id="content2">content 2</div>
<div id="content3">content 3</div>

Here is a canonical way to do this.
Please study and look at where I delegate and have added classes
Use toggle() in the jQuery example to open AND close on click
jQuery:
$(".button").on("click", function(e) {
$(".content").hide();
$("#" + $(this).data("id")).show(); // or .toggle()
});
.button {
width: 50px;
height: 50px;
background: lightblue;
margin: 5px;
cursor: pointer;
}
.content {
width: 100px;
height: 50px;
background: blue;
color: white;
margin: 5px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button" data-id="content1">button 1</div>
<div class="button" data-id="content2">button 2</div>
<div class="button" data-id="content3">button 3</div>
<div class="content" id="content1">content 1</div>
<div class="content" id="content2">content 2</div>
<div class="content" id="content3">content 3</div>
Vanilla JS
document.getElementById("nav").addEventListener("click", function(e) {
var tgt = e.target;
if (tgt.matches(".button")) {
document.querySelectorAll(".content").forEach(function(div) { // a simple for loop is needed for older IE
div.style.display = "none";
});
// Here I just show. If you want to toggle, you could use classList.toggle
document.getElementById(tgt.getAttribute("data-id")).style.display = "block";
}
});
.button {
width: 50px;
height: 50px;
background: lightblue;
margin: 5px;
cursor: pointer;
}
.content {
width: 100px;
height: 50px;
background: blue;
color: white;
margin: 5px;
display: none;
}
<div id="nav">
<div class="button" data-id="content1">button 1</div>
<div class="button" data-id="content2">button 2</div>
<div class="button" data-id="content3">button 3</div>
</div>
<div class="content" id="content1">content 1</div>
<div class="content" id="content2">content 2</div>
<div class="content" id="content3">content 3</div>

You can even create a tab system without any javascript at all, using the radio button css trick.
If a radio button is checked, then the next div is displayed, using the sibling selector: ~.
input{
display: none;
}
label{
display: inline-block;
padding: 3px;
border: 1px solid #aaa;
}
label:hover{
cursor: pointer;
}
.display{
display: none;
}
[type=radio]:checked ~ .display{
display: block;
}
<section>
<label for="div1">Show div 1</label>
<label for="div2">Show div 2</label>
<label for="div3">Show div 3</label>
</section>
<section>
<input type="radio" id="div1" name="tab-nav" checked />
<div class="display">
Text from div 1.
</div>
</section>
<section>
<input type="radio" id="div2" name="tab-nav" />
<div class="display">
Text from div 2. It's cool.
</div>
</section>
<section>
<input type="radio" id="div3" name="tab-nav" />
<div class="display">
Text from div 3. Definitely a cool css trick.
</div>
</section>
Here's another src and it's demo.

//find all buttons
document.querySelectorAll("button[data-target]").forEach(el => {
//put a click event on each button
el.addEventListener("click", ev => {
//when clicked, hide all divs
let divs = document.getElementsByClassName("my-div");
for (let div of divs) {
div.style = "display: none;";
}
//then show the div that this button should be showing
//by grabbing it's id from the data-target attribute and setting it's style
document.getElementById(el.getAttribute("data-target")).style = "display: block;";
});
});
.my-div {
display: none;
}
<button data-target="div1">div1</button>
<button data-target="div2">div2</button>
<button data-target="div3">div3</button>
<div class="my-div" id="div1">content 1</div>
<div class="my-div" id="div2">content 2</div>
<div class="my-div" id="div3">content 3</div>

Please refer to Accordion, if that is what you are ultimately trying to achieve.
Remove the condition in the button's click event if you do not want to hide the same content on second click.
SOLUTION:
button1.addEventListener("click", () => activeDiv = (activeDiv === "content1") ? "": "content1");
button2.addEventListener("click", () => activeDiv = (activeDiv === "content2") ? "": "content2");
button3.addEventListener("click", () => activeDiv = (activeDiv === "content3") ? "": "content3");
button1.addEventListener("click", openDivGroup);
button2.addEventListener("click", openDivGroup);
button3.addEventListener("click", openDivGroup);
var activeDiv = '';
function openDivGroup ($event) {
var contentIdArray = jQuery ("[id^=content]");
for (var i = 0; i < contentIdArray.length; i++) {
if (activeDiv === contentIdArray[i].id) contentIdArray[i].style.display = 'block';
else contentIdArray[i].style.display = 'none';
}
}
CODE SNIPPET:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
#button1,
#button2,
#button3 {
width: 50px;
height: 50px;
background: lightblue;
margin: 5px;
cursor: pointer;
}
#content1,
#content2,
#content3 {
width: 100px;
height: 50px;
background: blue;
color: white;
margin: 5px;
}
</style>
</head>
<body>
<div id="button1">button 1</div>
<div id="button2">button 2</div>
<div id="button3">button 3</div>
<div id="content1">content 1</div>
<div id="content2">content 2</div>
<div id="content3">content 3</div>
<script>
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
var button3 = document.getElementById("button3");
var content1 = document.getElementById("content1");
var content2 = document.getElementById("content2");
var content3 = document.getElementById("content3");
content1.style.display = "none";
content2.style.display = "none";
content3.style.display = "none";
button1.addEventListener("click", () => activeDiv = (activeDiv === "content1") ? "": "content1");
button2.addEventListener("click", () => activeDiv = (activeDiv === "content2") ? "": "content2");
button3.addEventListener("click", () => activeDiv = (activeDiv === "content3") ? "": "content3");
button1.addEventListener("click", openDivGroup);
button2.addEventListener("click", openDivGroup);
button3.addEventListener("click", openDivGroup);
var activeDiv = '';
function openDivGroup ($event) {
var contentIdArray = jQuery ("[id^=content]");
for (var i = 0; i < contentIdArray.length; i++) {
if (activeDiv === contentIdArray[i].id) contentIdArray[i].style.display = 'block';
else contentIdArray[i].style.display = 'none';
}
}
</script>
</body>
</html>

Javascript in need of simplification - collapsible tabs

I've coded some tabs and it seems to work well, although I'm sure I can achieve this with much cleaner code! I'm just not sure how to do that at the moment. I would really appreciate some help with this one.
I'm not sure if its loops I want to use or something completely different?
The way I've done it obviously works but it just seem unnecessary and messy, after this the next step is to add in a transition effect as the tabs come down. I'm not sure if this will even allow me to do that.
function myFunction() {
var a = document.getElementById("results1");
var b = document.getElementById("results2");
var c = document.getElementById("results3");
var d = document.getElementById("title1");
var e = document.getElementById("title2");
var f = document.getElementById("title3");
if (a.style.display === "none") {
a.style.display = "block";
b.style.display = "none";
c.style.display = "none";
d.style.backgroundColor = "#005FAA";
e.style.backgroundColor = "lightgrey";
f.style.backgroundColor = "lightgrey";
}
else {
a.style.display = "none";
d.style.backgroundColor = "lightgrey";
}
}
function myFunction1() {
var a = document.getElementById("results1");
var b = document.getElementById("results2");
var c = document.getElementById("results3");
var d = document.getElementById("title1");
var e = document.getElementById("title2");
var f = document.getElementById("title3");
if (b.style.display === "none") {
a.style.display = "none";
b.style.display = "block";
c.style.display = "none";
d.style.backgroundColor = "lightgrey";
e.style.backgroundColor = "#005FAA";
f.style.backgroundColor = "lightgrey";
}
else {
b.style.display = "none";
e.style.backgroundColor = "lightgrey";
}
}
function myFunction2() {
var a = document.getElementById("results1");
var b = document.getElementById("results2");
var c = document.getElementById("results3");
var d = document.getElementById("title1");
var e = document.getElementById("title2");
var f = document.getElementById("title3");
if (c.style.display === "none") {
a.style.display = "none";
b.style.display = "none";
c.style.display = "block";
d.style.backgroundColor = "lightgrey";
e.style.backgroundColor = "lightgrey";
f.style.backgroundColor = "#005FAA";
}
else {
c.style.display = "none";
f.style.backgroundColor = "lightgrey";
}
}
body{
margin: 10px;}
.title{
background-color:lightgrey;
width: 32%;
float: left;
text-align: center;
text-decoration:none;
color:white;
margin-right: 2%;
padding: 30px;
box-sizing: border-box;
}
.title:last-child{
margin-right:0px;
width:32%;}
.results{
background-color:#005FAA;
float:left;
width: 100%;
color: white;
padding: 30px;
box-sizing: border-box;
}
<div class="container">
<div id="title1" class="title" onclick="myFunction()">
<h4>Item 1</h4>
</div>
<div id="title2" class="title" onclick="myFunction1()">
<h4>Item 2</h4>
</div>
<div id="title3" class="title" onclick="myFunction2()">
<h4>Item 3</h4>
</div>
</div>
<div class="results" id="results1" style="display:none;">Item 1</div>
<div class="results" id="results2" style="display:none">Item 2</div>
<div class="results" id="results3" style="display:none">Item 3</div>

Maybe something like this? You are already using JQuery, so maybe make it modular and use it to help with your transition down effects (you can transition them up too if you'd like).
const tabs = {
animating: false,
toggleResults: function(thatTab) {
const thatResult = $(`[data-title="${thatTab.attr('id')}"]`);
thatTab.toggleClass('activeTab');
thatResult.toggleClass("openedResult");
tabs.animating = true;
thatResult.slideToggle("fast", function() {
tabs.animating = false;
});
},
init: function() {
$(".title").click(function() {
const thatTab = $(this);
const openedResult = $('.openedResult');
const thatTabId = thatTab.attr("id");
const openedResultTitle = openedResult.data('title');
if (!tabs.animating) {
$('.activeTab').removeClass('activeTab');
openedResult.removeClass('openedResult').hide();
if (thatTabId !== openedResultTitle) {
tabs.toggleResults(thatTab);
}
}
});
}
};
$(function() {
tabs.init();
});
body {
margin: 0;
}
.container {
display: flex;
justify-content: space-between;
width: 100%;
}
.title {
background-color: lightgrey;
flex-basis: 32%;
transition: background-color 0ms;
text-align: center;
color: white;
padding: 30px;
box-sizing: border-box;
}
.activeTab {
background-color: #005faa;
transition: background-color 100ms;
}
.results {
background-color: #005faa;
display: none;
width: 100%;
color: white;
padding: 30px;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div id="title1" class="title">
<h4>Item 1</h4>
</div>
<div id="title2" class="title">
<h4>Item 2</h4>
</div>
<div id="title3" class="title">
<h4>Item 3</h4>
</div>
</div>
<div class="results" data-title="title1">Item 1</div>
<div class="results" data-title="title2">Item 2</div>
<div class="results" data-title="title3">Item 3</div>

Try this , you can call same function on all three divs with passing their ids to find the current id.
<!DOCTYPE html>
<style type="text/css">
body{
margin: 10px;}
.title{
background-color:lightgrey;
width: 32%;
float: left;
text-align: center;
text-decoration:none;
color:white;
margin-right: 2%;
padding: 30px;
box-sizing: border-box;
}
.title:last-child{
margin-right:0px;
width:32%;}
.results{
background-color:#005FAA;
float:left;
width: 100%;
color: white;
padding: 30px;
box-sizing: border-box;
}
.active{
display = "block"
}
.inactive{
display : "none"
backgroundColor:"#005FAA"
}
</style>
<div class="container">
<div id="title1" class="title" onclick="ActivateTab(1)">
<h4>Item 1</h4>
</div>
<div id="title2" class="title" onclick="ActivateTab(2)">
<h4>Item 2</h4>
</div>
<div id="title3" class="title" onclick="ActivateTab(3)">
<h4>Item 3</h4>
</div>
<button onclick="ActivateTab(2)">Test</button>
</div>
<div class="results" id="results1" style="display:none;">Item 1</div>
<div class="results" id="results2" style="display:none">Item 2</div>
<div class="results" id="results3" style="display:none">Item 3</div>
<script>
function ActivateTab(id){
let results = document.querySelectorAll(".results")
let titles = document.querySelectorAll(".title")
results.forEach((elementResut,index) =>{
let elementTitle = titles[index];
if(elementResut.id === "results"+id
&& elementResut.style.display === "none")
{
elementResut.style.display = "block";
elementTitle.style.backgroundColor = "#005FAA";
}
else{
elementResut.style.display = "none";
elementTitle.style.backgroundColor = "lightgrey";
}
});
}
</script>

Here is one possible clean-up:
function myFunction(title) {
var results = [...document.getElementsByClassName("results")]
results.forEach(function(r) {
if (title.dataset.for == r.id) {
r.style.display = "block";
} else {
r.style.display = "none";
}
});
var titles = [...document.getElementsByClassName("title")]
titles.forEach(function(t) {
if (t == title) {
t.style.backgroundColor = "#005FAA"
} else {
t.style.backgroundColor = "lightgrey"
}
});
}
body{
margin: 10px;}
.title{
background-color:lightgrey;
width: 32%;
float: left;
text-align: center;
text-decoration:none;
color:white;
margin-right: 2%;
padding: 30px;
box-sizing: border-box;
}
.title:last-child{
margin-right:0px;
width:32%;}
.results{
background-color:#005FAA;
float:left;
width: 100%;
color: white;
padding: 30px;
box-sizing: border-box;
}
<div class="container">
<div id="title1" data-for="results1" class="title" onclick="myFunction(this)">
<h4>Item 1</h4>
</div>
<div id="title2" data-for="results2" class="title" onclick="myFunction(this)">
<h4>Item 2</h4>
</div>
<div id="title3" data-for="results3" class="title" onclick="myFunction(this)">
<h4>Item 3</h4>
</div>
</div>
<div class="results" id="results1" style="display:none;">Item 1</div>
<div class="results" id="results2" style="display:none">Item 2</div>
<div class="results" id="results3" style="display:none">Item 3</div>
I replaced your three functions with one function that accepts a parameter representing the title element. In the event handler, we just pass this to that function. Then in the function, we loop over the things that might have to change (the title and results nodes) testing as we do whether we're working with the matching element or a different one and choosing behavior based on that.
To link the title elements with the results one, I add a data-for attribute to it. There are many other ways this could be done, including using regular expressions to find the basic id (title2 ~> 2, results2 ~> 2 for instance) and matching on those. But this should get you going.
There is more clean-up I would probably do on this, but this should offer significant simplification.
Update
A comment pointed out that the above did not allow for total tab deselection. Given that, it seems better to refactor a bit more and use the shared base id approach. Here is another version written that way:
function myFunction(title) {
var id = title.id.match(/^\D*(\d+)$/)[1]
var hidden = document.getElementById(`results${id}`).style.display !== 'block';
[...document.getElementsByClassName("results")].forEach(function(r) {
r.style.display = "none";
});
[...document.getElementsByClassName("title")].forEach(function(t) {
t.style.backgroundColor = "lightgrey";
});
if (hidden) {
document.getElementById(`results${id}`).style.display = 'block';
document.getElementById(`title${id}`).style.backgroundColor = '#005FAA';
}
}
body{
margin: 10px;}
.title{
background-color:lightgrey;
width: 32%;
float: left;
text-align: center;
text-decoration:none;
color:white;
margin-right: 2%;
padding: 30px;
box-sizing: border-box;
}
.title:last-child{
margin-right:0px;
width:32%;}
.results{
background-color:#005FAA;
float:left;
width: 100%;
color: white;
padding: 30px;
box-sizing: border-box;
}
<div class="container">
<div id="title1" class="title" onclick="myFunction(this)">
<h4>Item 1</h4>
</div>
<div id="title2" class="title" onclick="myFunction(this)">
<h4>Item 2</h4>
</div>
<div id="title3" class="title" onclick="myFunction(this)">
<h4>Item 3</h4>
</div>
</div>
<div class="results" id="results1" style="display:none;">Item 1</div>
<div class="results" id="results2" style="display:none">Item 2</div>
<div class="results" id="results3" style="display:none">Item 3</div>

Rewrite Show/Hide Multiple Divs form JQ to clear JS

I wrote script in JQuery but I want to write in clear JS.
I can fix my problem if I m going to use onclick event in HTML code for example:
var divs = ["Div1", "Div2", "Div3", "Div4"];
var visibleDivId = null;
function divVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
.buttons a {
font-size: 16px;
}
.buttons a:hover {
cursor:pointer;
font-s
<div class="main_div">
<div class="buttons">
Div1 |
Div2 |
Div3 |
Div4
</div>
<div class="inner_div">
<div id="Div1">I'm Div One</div>
<div id="Div2" style="display: none;">I'm Div Two</div>
<div id="Div3" style="display: none;">I'm Div Three</div>
<div id="Div4" style="display: none;">I'm Div Four</div>
</div>
</div>
But I don't want to mix HTML with JS, and I want to use addEventListener.
My JQ Code below
jQuery(function(){
$('.targetDiv').hide();
jQuery('#showall').click(function(){
jQuery('.targetDiv').toggle();
});
jQuery('.showSingle').click(function(){
jQuery('#div'+$(this).attr('target')).toggle();
});
});
.showSingle{
padding: .9em;
margin: .2em;
border: 1px solid black;
float: left;
}
#showall{
padding: .9em;
margin: .2em;
border: 1px solid black;
float: left;
}
.cnt{
margin-top: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<a id="showall">All</a>
<a class="showSingle" target="1">Div 1</a>
<a class="showSingle" target="2">Div 2</a>
<a class="showSingle" target="3">Div 3</a>
<a class="showSingle" target="4">Div 4</a>
</div>
<section class="cnt">
<div id="div1" class="targetDiv">Content 1</div>
<div id="div2" class="targetDiv">Content 2</div>
<div id="div3" class="targetDiv">Content 3</div>
<div id="div4" class="targetDiv">Content 4</div>
</section>
I was trying make problem but every solution was failed, I will very thankful for help

So, all the HTML event attributes (onclick) come out and are replaced by DOM object references that hook up event callbacks with .addEventListener().
Since you have dedicated <a> elements in their own parent that show one of a set of dedicated <div> elements within their own parent. We can simply use the index of the clicked <a> as the index of the <div> that needs to be shown.
As for CSS, you should also not use individual styles, but rather just apply or remove a class. This is much simpler and more flexible.
// Get all the <a> elements that will trigger the show/hide code
var anchors = document.querySelectorAll(".buttons > a.showSingle");
// Convert anchors to a proper Array (so .forEach() and other Array methods work)
var anchorsArray = Array.prototype.slice.call(anchors);
// Set up each anchor with a click event handler
anchorsArray.forEach(function(a){
a.addEventListener("click", showHideDiv);
});
// Get reference to the "show all" anchor
var showAll = document.getElementById("showall");
// Set up click event handler for that single anchor
showAll.addEventListener("click", showAllDivs);
// Get all the <div> elements that will need to be shown or hidden
var divs = document.querySelectorAll(".inner_div > div[id^='div']");
// Convert divs to proper array (so .forEach() and other Array methods work)
var divArray = Array.prototype.slice.call(divs);
function showHideDiv(evt) {
// Cancel the link's native click behavior
evt.preventDefault();
evt.stopPropagation();
// Hide all the divs
divArray.forEach(function(d){
// No need to mess with individual style properties. Just apply a pre-existing class
d.classList.add("hidden");
});
// Show the div that was clicked using the index of the anchor
// By removing the "hide" class, the element's style goes back to
// whatever it was without that class.
divs[anchorsArray.indexOf(evt.target)].classList.remove("hidden");
}
function showAllDivs(){
// Show all the divs
divArray.forEach(function(d){
// No need to mess with individual style properties. Just apply a pre-existing class
d.classList.remove("hidden");
});
}
.buttons a {
font-size: 16px;
background-color:#aaf;
transition: .5s;
}
.buttons a:hover {
cursor:pointer;
background-color:#66f;
font-size: 18px;
}
/* This class will either be applied or not to take care of the visibility */
.hidden {
display:none;
}
.showSingle{
padding: .9em;
margin: .2em;
border: 1px solid black;
float: left;
}
#showall{
padding: .9em;
margin: .2em;
border: 1px solid black;
float: left;
}
.cnt{
margin-top: 2em;
}
<div class="main_div">
<div class="buttons">
<a id="showall">All</a>
<a class="showSingle">Div 1</a>
<a class="showSingle">Div 2</a>
<a class="showSingle">Div 3</a>
<a class="showSingle">Div 4</a>
</div>
<section class="cnt">
<div class="inner_div">
<div id="div1">I'm Div One</div>
<div id="div2" class="hidden">I'm Div Two</div>
<div id="div3" class="hidden">I'm Div Three</div>
<div id="div4" class="hidden">I'm Div Four</div>
</div>
</section>
</div>