How to get a link to a specific table in Multiple Tables mode

Pro Tips Elfsight Widgets Tips
1

Want to open a specific Pricing Table tab in a Multiple Tables mode? We’ve got a solution!

Here is the script that should be added to the Custom JS field on the Appearance tab of your widget’s settings:

function normalizedString(str) {
  return str.toLowerCase().replace(/\s+/g, '');
}

widget.on('init', ({ widgetContainer }) => {
  const url = new URL(window.location.href);
  const tabs = widgetContainer.querySelectorAll('.es-toggles-toggle');

  tabs.forEach((tab) => {
    tab.addEventListener('click', () => {
      url.searchParams.set('table', tab.textContent.trim().toLowerCase());
      window.history.pushState({}, '', url);
    });
  });

  const selectedTable = url.searchParams.get('table');
  if (!selectedTable) {
    return;
  }

  const tab = Array.from(tabs).find(
    (node) =>
      normalizedString(node.textContent) === normalizedString(selectedTable)
  );
  if (!tab) {
    return;
  }

  tab.click();
});

This script adds the ID of the table to the website’s URL, which lets you use links with the predefined tables.


Guys, was this solution helpful to you? Share your experience in the comments below :wink:

2 Likes