I'm working on adding a function to my WordPress site that will allow me to show/hide page elements with a specific class. For example, I want any elements (such as rows, containers, and text blocks) that have the 'show-hide' class to be hidden or shown when a button is clicked.
While I have successfully implemented this function, I believe there might be a more efficient way to achieve the same outcome. I would like to find a method that allows me to select all instances of the show-hide class on the page without having to specify individual numbers ([1], [2], [3], etc.) each time.
Since I am new to javascript, I would appreciate any guidance or advice on how to generate a range of values or use wildcard symbols (*) to simplify this process.
function myFunction() {
var x = document.getElementsByClassName("show-hide");
for (var i = 0; i < x.length; i++) {
if (x[i].style.display === "none") {
x[i].style.display = "block";
} else {
x[i].style.display = "none";
}
}
}