MediaWiki:Gadget-tabs.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

$(document).ready(function () {
  document.body.addEventListener('click', function (e) {
    var target = e.target;

    // Ensure the clicked element is an <a> inside a <span class="show-div">
    if (target.tagName.toLowerCase() === 'a' && target.parentNode.className.indexOf('show-div') !== -1) {
      e.preventDefault(); // Prevent default anchor behavior

      var parentSpan = target.parentNode;
      var targetId = target.getAttribute('href').substring(1); // Extract value after '#'

      // Remove "active" class from all spans
      var spans = document.querySelectorAll('.show-div');
      for (var i = 0; i < spans.length; i++) {
        spans[i].classList.remove('active');
      }

      // Add "active" class to the currently selected span
      parentSpan.classList.add('active');

      // Hide all divs
      var contentDivs = document.querySelectorAll('.content');
      for (var i = 0; i < contentDivs.length; i++) {
        contentDivs[i].classList.add('hidden');
      }

      // Show the targeted div by selecting its data-id
      var targetDiv = document.querySelector('.content[data-id="' + targetId + '"]');
      if (targetDiv) {
        targetDiv.classList.remove('hidden');
      }
    }
  });
});