How to Toggle the Visibility of Multiple HTML Elements by Class Name with JavaScript?

How to Toggle Visibility of HTML Elements by Class Name with JavaScript

You want to control the visibility of specific DIVs on a webpage dynamically. However, the current JavaScript script relies on getElementById, which is not suitable as your DIVs are identified by class names rather than IDs.

To overcome this challenge, you can utilize the getElementsByClassName method, which is supported by modern browsers. Here's a comprehensive solution:

function getElementsByClassName(node, className) {
  if (node.getElementsByClassName) {
    // Native implementation available
    return node.getElementsByClassName(className);
  } else {
    // Use fallback method
    return (function getElementsByClass(searchClass, node) {
      if (!node) node = document;
      var classElements = [],
          els = node.getElementsByTagName("*"),
          pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");

      for (var i = 0, j = 0; i < els.length; i++) {
        if (pattern.test(els[i].className)) {
          classElements[j] = els[i];
          j++;
        }
      }
      return classElements;
    })(className, node);
  }
}

Now, you can modify your toggle script to use getElementsByClassName:

function toggleVisibility(className) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if (e.style.display == 'block') {
       e.style.display = 'none';
     } else {
       e.style.display = 'block';
     }
  }
}

This updated script allows you to seamlessly toggle the visibility of multiple DIVs with the same class name.

The above is the detailed content of How to Toggle the Visibility of Multiple HTML Elements by Class Name with JavaScript?. For more information, please follow other related articles on the PHP Chinese website!