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>
Related
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'
})
This question already has answers here:
How to hide "span" if it text is "0" using jQuery?
(4 answers)
Closed 3 years ago.
So I have this function I know how it works but I wanted to ask you guys for help, because I want to make a function that when a variable's result is 0, then I will have a button that will hide all the 0 results. This function is intended for a table (the users will put some numbers, if the number is 0 then I want the button, so the zeros will hide (there will be a lot of zeros)).
function myFunction() {
var x = document.getElementById("p1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<button onclick="myFunction()">Button</button>
<h2 id="p1">Hide-show<h2>
You mean
document.querySelectorAll(".someClass").forEach(
ele => ele.style.display = ele.innerText === "0" ? "none": "block"
);
or
document.querySelectorAll(".someClass").forEach(
ele => if (ele.innerText === "0") ele.innerText = ""
);
jQuery versions in the dupe
Because you have tagged the answer with "jQuery", I would like to improve #mplungjan answers with the jQuery syntax, where you have the hide and show functions:
$(".someClass").hide()
In your case, you can use an attribute:
<table>
<tr data-value=0>...</tr>
</table>
Then you can select all elements with that attribute and show/hide them at once:
$('[data-value="0"]').hide()
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.
<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
This question already has answers here:
addEventListener vs onclick
(21 answers)
Using an HTML button to call a JavaScript function
(8 answers)
javascript expand/collapse text - collapse on default
(5 answers)
How to expand / collapse paragraph
(5 answers)
Get a CSS value with JavaScript
(8 answers)
Closed 4 years ago.
I am trying to make a collapsible div using HTML/JS. Below is my code. It is not having any effect on my page. How come?
Disclaimer : I am new at Javascript and I suck at it, so I suspect I have wired things up incorrectly. Is the onclick event needed here ?
JSFiddle is here (with CSS).
function showhide() {
var coll = document.getElementsByClassName("content");
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";
}
});
}
}
<div class="row">
<button class="collapsible" onclick="showhide()">Collapsible</button>
<div class="content">
<p>
This data should be collapsible.
</p>
</div>
</div>