Show hide section in WordPress Elementor on a button/text click

I am trying to create a jQuery that will allow me to show/hide sections by class on the website when I click on a selected button.

I have tried

created the text/button with css class websites and a section with a css class web, then :

$("#websites").click(function(){ $(".web").hide(); }) 

But this is not working for me , any help would be appreciated. Thanks

The new code

> <button onclick="myfunction()">Hide/Show</button> <script> function > myfunction() { > var x = document.getElementById('myDIV'); > if (x.style.display === 'none') { > x.style.display = 'block'; > } else { > x.style.display = 'none'; > } } </script> 

I need to have multiple values show/hidden. I tried getbyclass and also querySelectorAll. but this is still not working for me. Please advise.

1 Answer

It would be much simpler to use jquery for this - you can add a click event to your button and then select the elements you want by a class using $(".classname"), before then call .toggle().

I've provided an example below, the code is fully commented, all the CSS rules are simply to make it look nicer, they are not needed for functionality.

// Add click event to toggle button $("#toggleButton").click( function() { // Toggle elements with the class .toggleBox $(".toggleBox").toggle(); });

.box { height: 25px; width: 25px; margin: 5px; color: white; background: blue; text-align: center; line-height: 25px; } .toggleBox { background: green; }

<script src=""></script> <p>Boxes in green have the class .toggleBox, those in blue do not. The button below has a click event attached to it and will toggle the boxes with the class .toggleBox to show/hide</p> <button>Hide/Show</button> <div> A </div> <div> B </div> <div> C </div> <div> D </div> <div> E </div>