Show a 'Read more' link for tab content

Unsupported customization

This guide provides you with a starting point for the app customization.

Our support team can not make the customization for you, nor can they fix, change, or undo it.

If you're not comfortable proceeding, or if you'd like to adjust or enhance the customization in any way, consider hiring a Shopify Expert to help you out, or request help from other Shopify Community members within the Shopify Design discussion board.

To show a 'Read more' link for tab content:

  1. In the Custom JavaScript area, enter the following JavaScript code.

    // Add 'Read more' links to tab content
    (function() {
      var expandLinkText = 'Read more';
      var collapseLinkText = 'Read less';
      var minContentHeight = 300;
      var dataAttribute = 'data-is-expanded';
      
      // Create link
      function createLink(c) {
        var contentStyle = window.getComputedStyle(c);
        var link = document.createElement('a');
        link.setAttribute('href', '#');
        link.textContent = expandLinkText;
        link.style.display = 'block';
        link.style.paddingTop = contentStyle.getPropertyValue('padding-bottom');
        link.style.paddingRight = contentStyle.getPropertyValue('padding-right');
        link.style.paddingBottom = contentStyle.getPropertyValue('padding-bottom');
        link.style.paddingLeft = contentStyle.getPropertyValue('padding-left');
        link.addEventListener('click', function(e) {
          e.preventDefault();
          toggleContent(c);
        });
        return link;
      }
      
      // Hide content
      function hideContent(c) {
        c.removeAttribute(dataAttribute);
        c.style.height = minContentHeight + 'px';
        c.style.overflowY = 'hidden';
        c.readMoreLink.textContent = expandLinkText;
        c.readMoreLink.style.paddingTop = window.getComputedStyle(c).getPropertyValue('padding-bottom');
      }
      
      // Show content
      function showContent(c) {
        c.setAttribute(dataAttribute, '');
        c.style.height = 'auto';
        c.style.overflowY = 'visible';
        c.readMoreLink.textContent = collapseLinkText;
        c.readMoreLink.style.paddingTop = 0;
      }
      
      // Toggle content
      function toggleContent(c) {
        c.hasAttribute(dataAttribute) ? hideContent(c) : showContent(c);
      }
      
      // Init
      document.addEventListener("stationTabsInstanceReady", function(e) {
        e.detail.tabs.forEach(function(tab) {
          var content = tab.tabpanel.querySelector(".station-tabs-tabcontent");
          if (!content) { return; }
          if (content.offsetHeight < minContentHeight) { return; }
          var link = createLink(content)
          tab.tabpanel.appendChild(link);
          content.readMoreLink = link;
          hideContent(content);
        });
      });
    })();

Still need help? Contact Us Contact Us