Collapsible Div not working - what have I done wrongly? [duplicate] - javascript

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>

Related

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>

how to remove an image in javascript by clicking on it with remove method [duplicate]

This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 2 years ago.
i am trying to remove image by clicking on it after i create 'img' element using createElement but i cant remove the image , whats wrong with the removes function in my code ?
here is my code :
function generateCat(){
var image = document.createElement('img')
var div = document.getElementById('flex-cat-gen');
image.src= ('image.jpg');
div.appendChild(image);
}
document.getElementsByTagName('img').onclick = function removes() {
document.getElementsByTagName('img').remove();
}
You should try like this.You have to add an Eventlistener for click event.Also see document.getElementsByTagName(),
Method returns a live HTMLCollection of elements with the given tag
name
function generateCat() {
var image = document.createElement('img')
var div = document.getElementById('flex-cat-gen');
image.src = ('https://cdn.nikkiflower.com/assets/uploads/product_image/114/small/1575008384_0.jpg');
div.appendChild(image);
let tags = document.getElementsByTagName('img');
for (let i = 0; i < tags.length; i++) {
tags[i].addEventListener("click", function() {
this.remove()
})
}
}
<div id="flex-cat-gen">
</div>
<button class="btn btn-warning" onclick="generateCat()">Generat Cat</button>

Hide - Show Button when the result is 0 [duplicate]

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()

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.

JavaScript onclick event on elementByClassName [duplicate]

This question already has answers here:
Javascript infamous Loop issue? [duplicate]
(5 answers)
Closed 7 years ago.
I have following mark up and I am trying to run a javascript function once clicked. So far I haven't faced any success. Plz help -
<div class='color-bar'></div>
<div class='color-bar'></div>
<div class='color-bar'></div>
<div class='color-bar'></div>
var ColorBars = document.getElementsByClassName("color-bar");
var charts = $("#line-container").highcharts();
var series;
var colorIndex = new Array();
for(var i = 0; i < ColorBars.length; i++){
ColorBars[i].onclick = function(){
hideColor(i);
}
}
function hideColor(index){
var charts = $("#line-container").highcharts();
var series = charts.series[index];
if(series.visible){
series.hide();
}
else{
series.show();
}
}
The problem I am having is figuring out which color-bar user has clicked. Is it first one, 2nd or 3rd. Based on this I need to fire the hideColor function.
Thanks a lot. Best regards, jahid
You need to give you colorbars ids:
<div class='color-bar' id="colorbar1"></div>
<div class='color-bar' id="colorbar2">></div>
<div class='color-bar' id="colorbar3">></div>
<div class='color-bar' id="colorbar4">></div>
And then you can check with:
ColorBars[i].id == X

Categories