User:Boundbylife/template:npcwh: Difference between revisions

Line 8:

document.addEventListener('DOMContentLoaded', function () {

// Create a toggle button

var toggleButton = document.createElement('button');

toggleButton.textContent = 'Advanced View';

toggleButton.onclick = function() {

var columns = document.querySelectorAll('.toggle-column');

// Select all toggleable columns in tables with 'wikitable' and/or 'sortable' classes

var columns = document.querySelectorAll('.wikitable .toggle-column, .sortable .toggle-column');

for (var i = 0; i < columns.length; i++) {

// Toggle display state

columns[i].style.display = columns[i].style.display === 'none' ? '' : 'none';

}

// Toggle button text

this.textContent = this.textContent === 'Advanced View' ? 'Hide Advanced View' : 'Advanced View';

};

var ~~container~~ = document.~~querySelector~~('.wikitable'); // ~~Adjust if necessary to select appropriately~~

// Select all tables to potentially insert the toggle button before each

~~container~~.parentNode.insertBefore(~~toggleButton~~, ~~container~~);

var tables = document.querySelectorAll('.wikitable, .sortable');

tables.forEach(function(table) {

var buttonClone = toggleButton.cloneNode(true); // Clone the button for each table

table.parentNode.insertBefore(buttonClone, table); // Insert the button above each table

});

</script>

@@ Line 8: / Line 8: @@
 <script>
 document.addEventListener('DOMContentLoaded', function () {
+    // Create a toggle button
      var toggleButton = document.createElement('button');
      toggleButton.textContent = 'Advanced View';
      toggleButton.onclick = function() {
-         var columns = document.querySelectorAll('.toggle-column');
+        // Select all toggleable columns in tables with 'wikitable' and/or 'sortable' classes
+         var columns = document.querySelectorAll('.wikitable .toggle-column, .sortable .toggle-column');
          for (var i = 0; i < columns.length; i++) {
+            // Toggle display state
              columns[i].style.display = columns[i].style.display === 'none' ? '' : 'none';
          }
+        // Toggle button text
          this.textContent = this.textContent === 'Advanced View' ? 'Hide Advanced View' : 'Advanced View';
      };
-     var container = document.querySelector('.wikitable'); // Adjust if necessary to select appropriately
+     // Select all tables to potentially insert the toggle button before each
-    container.parentNode.insertBefore(toggleButton, container);
+     var tables = document.querySelectorAll('.wikitable, .sortable');
+    tables.forEach(function(table) {
+        var buttonClone = toggleButton.cloneNode(true); // Clone the button for each table
+        table.parentNode.insertBefore(buttonClone, table); // Insert the button above each table
+    });
 });
 </script>