
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.
41 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="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>
2ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJobW5vYGqFcYWOrJ%2Bor12dtqWxjKycnKyZpLtutc1mrqiqlKW%2Fpr%2FSZpylnZ2au7W70Wamp2WRYq%2B2wNOopWasla3Bbq%2FLopqk