Show a 'Read more' link for tab content

Unsupported customization

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

Our help 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:

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);
    });
  });
})();

Click Save.