We Keep Coding

Expand/hide collapsible using javascript

I want to implement expandable menu. Only one heading should be expanded. When user clicks on another one, content of the previously
expanded heading should hide. I have used code from w3schools, but I don't know how to automatically hide previous heading.
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
<h2>Collapsibles</h2>
<p>A Collapsible:</p>
<button class="collapsible">Open Collapsible</button>
<div class="content">
<p>text</p>
</div>
<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
<p>text</p>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
<p>text.</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="content">
<p>text</p>
</div>

Simply collapse opened collapsible on click by JS:
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
var content = this.nextElementSibling;
if (this.classList.contains("active")) {
content.style.opacity = 0;
} else {
if(node=document.querySelector(".collapsible.active")){
node.classList.toggle("active",false);
node.nextElementSibling.style.opacity = 0;
}
content.style.opacity = 1;
}
this.classList.toggle("active");
});
}
.content{
opacity:0;
transition:opacity 0.5s;
}
<h2>Collapsibles</h2>
<p>A Collapsible:</p>
<button class="collapsible">Open Collapsible</button>
<div class="content">
<p>text</p>
</div>
<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
<p>text1</p>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
<p>text2</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="content">
<p>text3</p>
</div>
Or, to use with height, you'll need to add overflow-y:hidden to hide it completely:
var coll = document.getElementsByClassName("collapsible");
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
console.trace()
debugger
var content = this.nextElementSibling;
if (this.classList.contains("active")) {
content.style.height = 0;
} else {
if(node=document.querySelector(".collapsible.active")){
node.classList.toggle("active",false);
node.nextElementSibling.style.height = 0;
}
content.style.height = content.scrollHeight+"px";
}
this.classList.toggle("active");
});
}
.content{
height:0;
transition:height 0.5s;
overflow-y:hidden;
}
<h2>Collapsibles</h2>
<p>A Collapsible:</p>
<button class="collapsible">Open Collapsible</button>
<div class="content">
<p>text1</p>
</div>
<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
<p>text1</p>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
<p>text2</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="content">
<p>text3</p>
</div>

A more readable way to do this is to divide your code in functions, like this:
<script>
function hideOthers(actual) {
var contentDivs = document.querySelectorAll('.content');
contentDivs.forEach(others => {
if (others !== actual) {
others.style.display = 'none';
}
});
}
function toggleDisplay(div) {
if (div.style.display === "block") {
div.style.display = "none";
} else {
div.style.display = "block";
}
}
function onContentLoaded() {
var collapsibleDivs = document.querySelectorAll(".collapsible");
collapsibleDivs.forEach(div => {
div.addEventListener('click', e => {
var clicked = e.srcElement;
var sibling = clicked.nextElementSibling;
toggleDisplay(sibling);
hideOthers(sibling);
})
})
}
document.addEventListener("DOMContentLoaded", onContentLoaded);
</script>
Notice I've just changed your JS script and I've used document.querySelectorAll to get all elements with a given class, forEach function to iterate over elements, arrow functions to provide callbacks and e.srcElement to get the clicked element on the click handler. Hope it help you. Welcome to SO!

My code to change the language of my website does not work

I've made a language switcher for my website, and it was working until I decided to store the text on a local .json file. It kind of works because it reads the text when loading the page, but when you try to change the language it does not work. This is my JavaScript code:
/*This is a list of all the id's I want to change*/
let ids = ["titleText", "llenguatge", "runBut", "trainBut", "resultText", "atention", "warn", "coll0but"]
function catalan() {
/*I load the json file from the folder. This is the part that doesn't work*/
$.getJSON("scripts/json/text_cat.json", function(cat) {
console.log(cat);
for (let i = 0; i < ids.length; i++) {
/*For every element with that id, change the text corresponding with that id (in the json file, the title is the same as the id)*/
document.getElementById(ids[i]).innerHTML = cat[ids[i]]
}
});
/*This part does work*/
console.log("Language has changed to catalan")
}
function spanish() {
$.getJSON("scripts/json/text_cas.json", function(cas) {
console.log("funciona?")
console.log(cas);
for (let i = 0; i < ids.length; i++) {
document.getElementById(ids[i]).innerHTML = cas[ids[i]]
}
});
console.log("Language has changed to spanish")
}
function english() {
$.getJSON("scripts/json/text_en.json", function(en) {
console.log(en);
for (let i = 0; i < ids.length; i++) {
document.getElementById(ids[i]).innerHTML = en[ids[i]]
}
});
console.log("Language has changed to english")
}
Json file:
{
"titleText":"Blah blah",
"llenguatge":"Language",
"runBut":"Guess",
"trainBut":"Train",
"resultText":"Result:",
"atention":"Warning!",
"warn":"Blah blah blah",
"coll0but":"Color tools",
}
(Edit) Here's the HTML:
<div class="Content">
<div id="nn_container">
<div id="canvas" style="display: inline-block;"></div>
<div>
<span id="result" class="eqCont">
<div id="run" class="half"></div>
<div id="answer" class="half">
<div id="lastColor">
<b id="resultText"></b>
<span id="clar" class="reult"></span>
</div>
</div>
</span>
</div>
</div>
<div id="info">
<div id="Warning1" class="warning">
<strong id="atention"></strong> <p class="text" id="warn"></p>
</div>
</div>
</div>
How should I fix it?

Double onclick events not working

I have a tab menu on my website and the code used for it works perfectly. JavaScript:
function openTab(tabName) {
var i;
var x = document.getElementsByClassName("tab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tabName).style.display = "flex";
}
HTML:
<div class="col-md-4">
<div onclick="openTab('tab-1')" class="tab-button">
<h5>IT Problems</h5>
</div>
</div>
<div class="col-md-4">
<div onclick="openTab('tab-2')" class="tab-button">
<h5>Save Time</h5>
</div>
</div>
<div class="col-md-4">
<div onclick="openTab('tab-3')" class="tab-button">
<h5>Cost Effective</h5>
</div>
</div>
And then obviously I applied the IDs ("tab-[1/2/3]") and classes ("tab") to the divs I want as tabs. However, when I replicate the exact same code to have a tab button highlighted for the current tab open, it doesn't work. JavaScript:
function selectedTab(selectName) {
var i;
var x = document.getElementsByClassName("select");
for (i = 0; i < x.length; i++) {
x[i].style.border-bottom-color = "#dbdbdb";
}
document.getElementById(selectName).style.border-bottom-color = "#25a7df";
}
HTML:
<div class="col-md-4">
<div onclick="openTab('tab-1'); selectedTab('select-1')" class="tab-button">
<h5 id="select-1" class="select">IT Problems</h5>
</div>
</div>
<div class="col-md-4">
<div onclick="openTab('tab-2'); selectedTab('select-2')" class="tab-button">
<h5 id="select-2" class="select">Save Time</h5>
</div>
</div>
<div class="col-md-4">
<div onclick="openTab('tab-3'); selectedTab('select-3')" class="tab-button">
<h5 id="select-3" class="select">Cost Effective</h5>
</div>
</div>
I've looked literally everywhere online and had multiple people look at this and nobody can find a solution. Can anyone help?

border-bottom-color is not a valid style property, you need to replace hyphen case with camel case
You need to use the borderBottomColor property of style in selectTab method
function selectedTab(selectName) {
var x = document.getElementsByClassName("select");
for (var i = 0; i < x.length; i++) {
x[i].style.borderBottomColor = "#dbdbdb"; //observe style property Change
}
document.getElementById(selectName).style.borderBottomColor = "#25a7df";
}

JQuery run a function when a div shows

I want to run a function when a div shows.
HTML:
<div id="holder">
<div id="main1" class="container-fluid">
<h1>Header 1</h1>
<div class="btn btn-default pull-right" onclick="show('main2');">Next</div>
</div>
<div id="main2" class="container-fluid" style="display:none;">
<h1>Header 2</h1>
<div class="btn btn-default pull-right" onclick="show('main3');">Next</div>
</div>
<div id="main3" class="container-fluid" style="display:none;">
<h1>Header 3</h1>
</div>
</div>
JS:
function show(elementID) {
var ele = document.getElementById(elementID);
if (!ele) {
alert("no such element");
return;
}
var pages = document.getElementsByClassName('container-fluid');
for (var i = 0; i < pages.length; i++) {
pages[i].style.display = 'none';
}
ele.style.display = 'block';
}
I want to run a function when my #main3 shows. The function is to set a timer so that after showing #main3 for 10 sec, it will show #main1.
Now how do I detect when my #main3 shows?

You can check for elementID, if it is main3, then set setTimeout for 10000 ms (10s) and call show('main1') in timeout after the line ele.style.display = 'block'; as following:
function show(elementID) {
var ele = document.getElementById(elementID);
if (!ele) {
alert("no such element");
return;
}
var pages = document.getElementsByClassName('container-fluid');
for(var i = 0; i < pages.length; i++) {
pages[i].style.display = 'none';
}
ele.style.display = 'block';
if(elementID == "main3"){
setTimeout(function(){ show("main1"); }, 10000);
}
}
DEMO

Since you have used jQuery tag, you can use a jQuery solution in which we can see whether the current tab is the last one if so then use a timer to show the first one like
jQuery(function($) {
$('#holder .nxt').click(function() {
var $parent = $(this).parent();
var $next = $parent.hide().next().show();
if ($next.is(':last-child')) {
setTimeout(function() {
$next.hide().siblings().first().show();
}, 2500)
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="holder">
<div id="main1" class="container-fluid">
<h1>Header 1</h1>
<div class="btn btn-default pull-right nxt">Next</div>
</div>
<div id="main2" class="container-fluid" style="display:none;">
<h1>Header 2</h1>
<div class="btn btn-default pull-right nxt">Next</div>
</div>
<div id="main3" class="container-fluid" style="display:none;">
<h1>Header 3</h1>
</div>
</div>

after this:
ele.style.display = 'block';
you can have a check like:
ele.style.display = 'block';
if(ele.id === "main3"){
// call it here.
}

function show(elementID) {
var ele = document.getElementById(elementID);
if (!ele) {
alert("no such element");
return;
}
var pages = document.getElementsByClassName('container-fluid');
for(var i = 0; i < pages.length; i++) {
pages[i].style.display = 'none';
}
ele.style.display = 'block';
if(elementID=='main3'){
yourFunction();// call your function here!
}
}

javascript: onclick go to specific div

I'm trying to create a "diagram" with divs. If user click on next it will show the next div and so on (this is done), but the thing i'm trying to reach is, sometimes some divs will have a question with "yes" or "no" buttons, and those buttons will target to some specific div.
Ex: Div 1 - Are you ok ? Yes - Go to Div 2 | No - Go to Div 3.
Is there a way to make this dynamic ? All divs have an ID.
Here's the code i've got so far.
HTML
<div id="main">
<h3 class="despistes">Some Title</h3>
<div class="info" id="1" style="display:block">Div 1</div>
<div class="info" id="2">Div 2</div>
<div class="info" id="3">Div 3</div>
<div class="info" id="4">Div 4</div>
<div class="info" id="5">Div 5</div>
<div class="info" id="6">Div 6</div>
<div class="info" id="7">Div 7</div>
<div class="info" id="8">Div 8</div>
<button class="button" onclick="mostraDiv('inicio')" style="float:left">inicio</button>
<button class="button" onclick="mostraDiv('avancar')" style="float:right">seguinte</button>
<button class="button" onclick="mostraDiv('anterior')" style="float:right">retroceder</button>
</div>
JS
var divNo = 0;
function mostraDiv(direction) {
var sel = document.getElementById('main').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
switch (direction) {
case 'inicio' : divNo = 0; break;
case 'anterior' : divNo--; break;
case 'avancar' : divNo++; break;
case 'ultima' : divNo = sel.length-1; break;
}
if (divNo > sel.length-1) { divNo = 0; }
else { if (divNo < 0) { divNo = sel.length-1; } }
sel[divNo].style.display = 'block';
}
onload = function() {
mostraDiv('s');
};
This function i found here and works fine for me.
Thanks in Advance.

try this :
<p>Are You OK ?</p>
<button class="button" onclick="goToDiv(2)" style="float:left">Yes</button>
<button class="button" onclick="goToDiv(3)" style="float:left">No</button>
function goToDiv(divNo) {
var sel = document.getElementById('main').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
if (divNo > sel.length-1) { divNo = 0; }
else { if (divNo < 0) { divNo = sel.length-1; } }
sel[divNo].style.display = 'block';
}