JavaScript

Custom JS was needed to ensure the accordion and tab systems function correctly when the page is saved, and to allow teachers to edit the content within the Editor.

This JavaScript is used to dynamically add and remove classes for the tab functionality.

document.addEventListener('DOMContentLoaded', function() {
    // Add class to enable tab functionality (hides non-active panes)
    document.body.classList.add('tabs-active');
  
    // Loop over each tab group
    document.querySelectorAll('.tabs-wrapper').forEach(wrapper => {
      const tabs = wrapper.querySelectorAll('.list-group-itemh');
      const tabPanes = wrapper.querySelectorAll('.tab-h-pane');
  
      // Add click listeners for tabs within this group
      tabs.forEach(tab => {
        tab.addEventListener('click', function(e) {
          e.preventDefault();
          // Remove active classes only within this wrapper
          tabs.forEach(t => t.classList.remove('active'));
          tabPanes.forEach(pane => {
            pane.classList.remove('active', 'show');
          });
          // Mark this tab as active
          this.classList.add('active');
  
          // Get the data-index for the clicked tab
          const index = this.getAttribute('data-index');
          // Find the corresponding pane within this wrapper
          const targetPane = wrapper.querySelector('.tab-h-pane[data-index="' + index + '"]');
          if (targetPane) {
            targetPane.classList.add('active', 'show');
          }
        });
      });
    });
  });