Hide clicked button after toggle - javascript

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.

Related

I want to hide a div using javascript

I created a div contaning a form and a button. I want to hide the entire div when the button is clicked.
function myFunction() {
let x = document.querySelector("div");
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<div onmouseover="firstPageDisplay();" id="firstPage">
<div><img id="imgs"></div>
<div class="center">
<form class="center">Authentification<br>
<p>Login</p> <input id="login" type="text"><br>
<p>Password</p> <input id="password" type="password"><br><br>
<button onclick="myFunction();" id="btnA">Se connecter</button>
</form>
</div>
</div>
This is what I tried to do, however when I click the button, the div disappears for a split second then reappears again. When I removed the button from the div it worked just fine. How can I make it disappear for good?
you have document.querySelecor('div') which is selecting the first <div> in the whole document, probably not what you want.
the error is here
function myFunction() {
let x = document.querySelector("div");
if (x.style.display == "none") { // error
x.style.display = "block";
} else {
x.style.display = "none";
}
}
you can only set a style, not get a style. Why? Because reasons nobody with common sense will understand. so instead you have to use getComputedStyle(element).styleName
function myFunction() {
let x = document.querySelector("div"); // if this is div you want
if (getComputedStyle(x).display == "none") { // 👍👍👍
x.style.display = "block";
} else {
x.style.display = "none";
}
}
but as mentioned in a comment above, toggling a class and using event listeners are much better practice

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'
})

Show a hidden div element on clicking navbar item [duplicate]

This question already has answers here:
Twitter Bootstrap alert message close and open again
(15 answers)
Closed 3 years ago.
I have 3 column of divs in bootstrap, and I can close any div by using-
×
Now I have a side navbar containing the title of the divs that are shown on the body of the page, I want the functionality that on clicking a navbar item , respective div item will re-appear from hidden state.
I tried the following way-
function toggleVisibility(id) {
var x = document.getElementById(id);
if (x.style.display === "none") {
x.style.display = "inline";
} else {
x.style.display = "none";
}
}
But unfortunately it is not even getting called- and thats why I cannot figure out how to run custom onclick command on navbar <a> anchor tags..
My sidenav looks like-
<div id="mySidenav" class="sidenav">
×
<a class="active" href="#home">Overview</a>
<span onclick="toggleVisibility('card1')">Card1</span>
Card2
Card3
</div>
You can see I have used one span and 2 to figure out which one is working- But actually none working.
When the span is in the body of the page it is working correctly , but in the navbar menu items no custom action works.
Here is the jsfiddle to help- https://jsfiddle.net/upyxn7wj/1/
So How to show hidden divs via nav-menu item click-
N.B: I AM USING Rails and this is for rendering the views I have tried the jsfiddle given by showdev in the comments- but its not working
Try adding below code,
function toggleVisibility(id) {
/* START : Code to disable the other div's on click */
var xVal = document.getElementsByClassName("col-md-4");
var i;
for (i = 0; i < xVal.length; i++) {
xVal[i].style.display = "none";
}
/* END: Code to disable the other div's on click */
var x = document.getElementById(id);
if (x.style.display === "none") {
x.style.display = "inline";
} else {
x.style.display = "none";
}
}
instead of "col-md-4" you put one more class name for those div's and use it in the code.

div style.height and style.width not preserved

I have Canvas JS charts as divs with chart data in separate javascript file.
The charts are hidden by default. Only on clicking an OnClick event handler the charts need to be shown. I am using style.display='none' by default and OnClick I am setting style.display='block'. But it is not keeping the div style.height and style.width parameters fixed. The OnClick chart shown is small in size and I want it to be of the size printed in the div. How to achieve that ?
I use the code :
var x = document.getElementById(res);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
Clicking the on click event handler the charts supposed to be visible.
var str1= "chartContainer";
var res = str1.concat(dt);
var x = document.getElementById(res);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
The chart that is shown is small in size. Like :
https://www.photobox.co.uk/my/photo/full?photo_id=501983526299
But it is supposed to preserve the div height and width , like :
https://www.photobox.co.uk/my/photo/full?photo_id=501983527221

Simple hide/show div+js : how to start hidden?

I have a Hide/show div with a button and javascript code. I want to start it hidden (and not show).
can you help me ?
HTML
Click Me
<div id="myDIV">
This is my DIV element.
</div>
JAVASCRIPT
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
this is were i have found the code : hide/show
put onload in body
<body onload="myFunction()">

Categories