Table Stackin on Mobile, Easy Sider Arrows on Mobile, Accordion Sort Not Working

Hey beverlystone,
To restructure the table for mobile view from this:

to this:

I added this javascript to your WP Code plugin as a new snippet, and in the top right corner I used the javascript snippet as the code type:

and then saved.

document.addEventListener("DOMContentLoaded", function() {
  function restructureTableForMobile() {
    var screenWidth = window.innerWidth;
    var tables = document.querySelectorAll('tbody');

    if (screenWidth <= 767 && tables.length > 0) {
      tables.forEach(function(table) {
        var rows = table.querySelectorAll('tr');
        var newTableStructure = document.createDocumentFragment();
        var columns = rows[0].children.length;

        for (let colIndex = 0; colIndex < columns; colIndex++) {
          var newRow = document.createElement('tr');
          rows.forEach(function(row, rowIndex) {
            var cell = row.children[colIndex].cloneNode(true);
            newRow.appendChild(cell);
          });

          newTableStructure.appendChild(newRow);
        }
        table.innerHTML = '';
        table.appendChild(newTableStructure);
      });
    }
  }
  restructureTableForMobile();
  window.addEventListener('resize', restructureTableForMobile);
});

This will also work for multiple tables on the page, so I added another table to demonstrate, please check.

Best regards,
Mike

Hi,
Glad that this helped, please open separate threads for each issue, thanks for using Enfold.

Best regards,
Mike