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

Question

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.

Answer 1

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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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 id="toggleButton">Hide/Show</button> <div class="box toggleBox"> A </div> <div class="box toggleBox"> B </div> <div class="box"> C </div> <div class="box toggleBox"> D </div> <div class="box"> E </div>