Add "View More" functionality to Supply's sidebar filtering.

collection-sidebar.liquid

    {% comment %}
    Replace the current grid-uniform section with this one.
    {% endcomment %}
    <div class="grid-uniform">
      {% comment %}
        Loop through tag categories
      {% endcomment %}
      {% for cat_item in cat_array %}
        {% comment %}
          Ignore if tag category is empty
        {% endcomment %}
        {% unless cat_item == '' %}
        <div class="grid-item small--one-half medium--one-third">
          <h3>{{ cat_item }}</h3>
          <ul class="advanced-filters sidebar-module__list">
            {% comment %}
              Loop through collection tags
            {% endcomment %}
            {% assign indexOfLoop = 0 %}
            {% assign viewMore = false %}
            {% assign viewMoreLimit = 5 %}
            {% for custom_tag in collection.all_tags %}
              {% if custom_tag contains cat_item %}
            	{% assign indexOfLoop = indexOfLoop | plus: 1 %}
            	{% if indexOfLoop > viewMoreLimit %}
                  {% assign viewMore = true %}
                {% endif %}
                {% comment %}
                  Strip out tag category prefix and add/remove link for tag filtering
                {% endcomment %}
                {% if current_tags contains custom_tag %}
                  <li class="advanced-filter active-filter {% if indexOfLoop > viewMoreLimit %}sidebar-module__hidden-item{% endif %}" data-group="{{ cat_item }}" data-handle="{{ custom_tag | handleize }}">{{ custom_tag | remove_first: cat_item | remove: '_' | link_to_remove_tag: custom_tag }}</li>
                {% else %}
                  <li class="advanced-filter {% if indexOfLoop > viewMoreLimit %}sidebar-module__hidden-item{% endif %}" data-group="{{ cat_item }}">{{ custom_tag | remove_first: cat_item | remove: '_' | link_to_add_tag: custom_tag }}</li>
                {% endif %}
              {% endif %}
            {% endfor %}
        </ul>
        {% if viewMore %}
          <button class="text-link sidebar-module__viewmore">
            <span class="sidebar-module__expand">View More</span>
            <span class="sidebar-module__collapse">View Less</span>
          </button>
        {% endif %}
        </div>
        {% endunless %}
      {% endfor %}
    </div>

theme.liquid

  {% comment %}
  Place this just before the end of the body -> </body>
  {% endcomment %}

  <script>
    jQuery(function($) {
      $('.sidebar-module__viewmore').on('click', function() {
        $(this).prev('.sidebar-module__list').toggleClass('sidebar-module__list--expand');
      });
    });
  </script>

timber.scss.liquid

{% comment %}
Place the following add the end of this file
{% endcomment %}

.sidebar-module__hidden-item {
  display: none;
}
.sidebar-module__collapse {
  display: none;
}
.sidebar-module__viewmore {
  top: -25px;
  position: relative;
}
.sidebar-module__list--expand {
  .sidebar-module__hidden-item {
    display: block;
  }

  + .sidebar-module__viewmore .sidebar-module__expand {
    display: none;
  }

  + .sidebar-module__viewmore .sidebar-module__collapse {
    display: inline-block;
  }
}

This didn't work for me: www.mobilepharmacy.ca. Any advice would be great! Thanks!