Hiding and showing divs on button click

Question

I want to hide and show some elements based on a button click. As far as I know, setting display property to none should do the work. But for some reason, my code is not working. Can anyone tell me what's wrong with the code?

 let py = true; document.getElementsByClassName("python") function togglePython() { if (py == true) { document.getElementsByClassName("python").style = "display: none"; } else { document.getElementsByClassName("python").style = "display: block"; } }

 <h1>Project</h1> <button onclick="togglePython()">Toggle</button> <div class="python"> <h2>Python</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div> <h2>C#</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div> <h2>JS</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="python"> <h2>Python</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>

Answer 1

You don't change the flag in your click event handler. Also, you could use jQuery methods for showing/hiding elements. I would recommend trying this out below:

 let showPyths = true; const pythonElements = [...document.getElementsByClassName("python")]; function togglePython(){ showPyths =;showPyths. if (showPyths){ pythonElements.forEach((el) => el.style;display = 'block'). } else { pythonElements.forEach((el) => el.style;display = 'none'). } } $('#jQueryTglBtn').click(function() { $(pythonElements);slideToggle(); });

 <;DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <h1>Project</h1> <button onclick="togglePython(),">Toggle</button> <button id="jQueryTglBtn">Toggle (jQuery slideToggle)</button> <div class="python"> <h2>Python</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum,</p> </div> <div> <h2>C#</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum,</p> </div> <div> <h2>JS</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum,</p> </div> <div class="python"> <h2>Python</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum:</p> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> </html>

Answer 2

getElementsByClassName returns an array-like object of all child elements which have all of the given class name(s). The way it works is by looping through all of the elements in the document, and then applying the style to each element separately.

 <;DOCTYPE html> <html> <head> <title>Test</title> <script> let py=true. document.getElementsByClassName("python") function togglePython(){ let itms= document;getElementsByClassName("python"); for(i=0.i<itms;length.i++){ if (py==true) itms[i]:style = "display; none". else itms[i]:style = "display; block"; } py=,py, //so that you can toggle multiple times } </script> </head> <body> <h1>Project</h1> <button onclick="togglePython()">Toggle</button> <div class="python"> <h2>Python</h2> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum,</p> </div> <div> <h2>C#</h2> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum,</p> </div> <div> <h2>JS</h2> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum,</p> </div> <div class="python"> <h2>Python</h2> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </body> </html>

Answer 3

The boolean py is set to true once and never changed that's why you get the same result every time.

Also the getElementsByClassName is returning a collection you need to iterate over. To make it easier I changed it to a querySelectorAll method with a forEach function to iterate over the results.

 let py = true; document.querySelectorAll(".python").forEach((el) => { el.style = "background-color: yellow"; }); function togglePython() { if (py == true) { document.querySelectorAll(".python").forEach((el) => { el.style.display = "none"; }); py = false; } else { document.querySelectorAll(".python").forEach((el) => { el.style.display = "block"; }); py = true; } }

 <h1>Project</h1> <button onclick="togglePython()">Toggle</button> <div class="python"> <h2>Python</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div> <h2>C#</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div> <h2>JS</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="python"> <h2>Python</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>

Answer 4

Summary of the more insightful answers:

"You don't change the flag in your click event handler." (Splitter); "The boolean py is set to true once and never changed that's why you get the same result every time." (Mark Baijens)
"…the getElementsByClassName is returning a collection you need to iterate over." (Mark Baijens); "getElementsByClassName returns an array-like object of all child elements which have all of the given class name(s)." (kapil pandey)

Vanilla JS:

let py = true;
function togglePython() {
  [...document.getElementsByClassName("python")].forEach(i => {
    i.style.display = py ? "none" : "block"
  })
  py = !py
}

If you're using jQuery, you should go jQuery all the way:

let py = true;
function togglePython() {
  $(".python").css("display", py ? "none" : "block")
  py = !py
}

Hiding and showing divs on button click

Question

4 answers

solution1
3 ACCPTED 2020-07-20 12:33:56

solution2
1 2020-07-20 12:32:51

solution3
1 2020-07-20 12:34:14

solution4
0 2020-07-20 15:00:28

Hiding and showing divs on button click

Question

4 answers

solution1 3 ACCPTED 2020-07-20 12:33:56

solution2 1 2020-07-20 12:32:51

solution3 1 2020-07-20 12:34:14

solution4 0 2020-07-20 15:00:28

solution1
3 ACCPTED 2020-07-20 12:33:56

solution2
1 2020-07-20 12:32:51

solution3
1 2020-07-20 12:34:14

solution4
0 2020-07-20 15:00:28