We Keep Coding

Hide clicked button after toggle

I'm using this code to toggle the visibility of a section. When the button is clicked, the section shows.
function myFunction() {
var x = document.getElementById("offerte-toggle");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
<a onclick="myFunction()" id="knop-doorz" class="witte-randen">Offerte opvragen</a>
How can I hide the button after it has been clicked?

your JS code is targetting an element with id offerte-toggle but in your html, the has an id of knop-doorz
Either edit the html id to match the JS or vice versa.
You also don't need to do the if check, just simply set x.style.display = 'none'; before the closing } tag.

How to show/hide an element in JavaScript? [duplicate]

This question already has answers here:
JavaScript hide/show element
(13 answers)
Closed 2 years ago.
I'm creating a div element to test hiding and showing an element in JS for my calendar program. I have a function that uses x.style.display to render or hide the div, "info", in the page. But it doesn't work when I test it; when I click the button the "info" div stays on the screen as normal.
function show() {
var divide = document.getElementById("info").innerHTML;
if (divide.style.display === "hidden") {
divide.style.display = "block";
} else {
divide.style.display = "hidden";
}
}
<button onclick="show()">Show/Hide</button>
<div class="info">Testy</div>

You have used innerHtml is use to assign string. So remove that and hide you can use display:none not hidden.
function show() {
var divide = document.getElementById("info");
if (divide.style.display === "none") {
divide.style.display = "block";
} else {
divide.style.display = "none";
}
}
<div id="info">Testy</div>
<button onclick="show()">Show/Hide</button>

Why does my script only act on the first element with a particular ID value?

I have a query that produces a number of DIV id="toggle_panel" I know I can effectively change the ID of the DIV dynamically.
Below is the script, straight from w3schools, which works great out of the box...for the first DIV and first DIV only. How do I apply a dynamic variable from the query to my script?
Second question: How do I get it so the DIV are hidden by default?
function myFunction() {
var x = document.getElementById("toggle_panel");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
Thank you

For your first question, using a class would be more appropriate to tag a collection similar html elements.
So your divs should look something like this:
<div class="toggle_panel">...</div>
<div class="toggle_panel">...</div>
<div class="toggle_panel">...</div>
You could then use document.getElementsByClassName('toggle_panel') to access them.
Also to hide them by default, you could use css to target your classes as shown below.
.toggle_panel {
display: none;
}

As mentioned in the comments, you can only have one instance of an ID. To achieve the result you want you will have to change the <div id="toggle_panel">content</div> to <div class="toggle_panel">content</div>. Then use the following javascript:
function myFunction() {
var panels = document.getElementsByClassName("toggle_panel");
for(var i = 0; i < panels.length; i++) {
var panel = panels[i];
if (panel.style.display === "none") {
panel.style.display = "block";
} else {
panel.style.display = "none";
}
}
}

I think you should use querySelectorAll('toggle_panel') and your code will be like this:
Array.from(document.querySelectorAll('toggle_panel')).forEach((element) => {
element.display = 'none'
})

make div appear when var is bigger than 14. otherwise keep it hidden

<script>var div = document.getElementById('demo');
if (totaal > 14) {
div.style.display = 'block';
div.style.visibility='visible';
}
else {
div.style.display = 'none';
div.style.visibility='hidden';
}</script>
when using this script the div stays hidden and doesnt become bigger. Anyone know what i can do to make the div appear when var 'totaal' is bigger than 14?
Thanks
Edit1: var totaal is already set earlier in the script. Its a large script with adding and subtracting 1 from 'totaal'. That part isn't neccesary so I didn't include it.

You can use function to toggle your div based on the value of totaal :
function toggleDiv(totaal) {
var div = document.getElementById('demo');
if (totaal > 14) {
div.style.display = 'block';
} else {
div.style.display = 'none';
}
}
Now, all the time you change tootal, you can call this function with totaal as parameter to toggle the div

Making one div visible at a time

I'm trying to make when some presses a button that only one div is visible at a time. So when they click another button, that corresponding div pops up and the last one hides.
I've tried a for loop:
function display(x) {
for (i=0; i<content.length; i++){
content[i].style.display = 'none';
}
if(x = content[i]){
x.style.display = 'inline';
}
}
This didn't do anything.
I tried nesting the if statement inside the loop, but it caused all to be visible.
I've linked the jsfiddle below.
Please no jQuery answers as I'm trying to learn pure javascript first.
Thanks in advance.
https://jsfiddle.net/ethacker/rp59g9cf/

You are not putting the if inside the loop. Therefore, it will only check the last value of i. Also, the equals should be ==. You should do it like this:
function display(x) {
for (i=0; i<content.length; i++){
if(x == content[i]){
x.style.display = 'inline';
} else {
content[i].style.display = 'none';
}
}
}

see this fiddle example code I slightly modified your code
var currDisplayElm;
//function
function display(content) {
if(currDisplayElm)
currDisplayElm.style.display = 'none';
currDisplayElm = content;
content.style.display = 'inline';
}

As I understand.
Ithink If you call function on click of button then set div Id in sequence and you should pass thet div no which you want to display.
And div name must be same then you can hide other div.
I hope you understand ..