Portfolio: How to get a link to a certain category

Pro Tips Elfsight Widgets Tips
1

Want to get a link to a specific Portfolio category to open it by default? We’ve got a solution!

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

const openTab = () => {
  const waitForElements = (selector) => new Promise(res => {
  let i = 0;

  const check = () => {
    const components = document.querySelectorAll(selector);

    if (components.length) {
      res(components);
    } else if (i !== 50) {
        setTimeout(check, 100);
        i++;
      }
    };

    check();
  });

  const hash = location.hash.split("#").pop();
  const decodedHash = hash ? decodeURIComponent(hash) : '';
  
  waitForElements('.eapp-portfolio-project-list-categories-item').then(tabs => {
    const tab = [...tabs].find(tab => decodedHash === tab.textContent.toLowerCase().replace(/ /g, "_"));
    tab?.click();
  });
};

openTab();
window.addEventListener("hashchange", openTab);

This script assigns the specific ID to each category tab. The ID for each tab is its name where the space is replaced by an underscore. For example, the id for the category Elfsight Test will be elfsight_test.

So, if you want to get the link where the specific tab will be opened by default, you need to add this part to your link: #elfsight_test.

This video demonstrates the feature in action:


Got question or faced difficulties? Drop us a line in the comments and we’ll be happy to help :slightly_smiling_face:

3 Likes