Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Separating Section Block Counts

Separating Section Block Counts

Shamilton44
New Member
6 0 0

Hoping that someone is able to help me, I am trying to add a show more/show less toggle into a new section.

 

By default, I will show 6 section blocks but if there are more I'd like to place them in an accordion that will expand/collapse to show the additional items.

 

{% assign count = 0 %}
{% for block in section.blocks %}
    {% assign count = count | plus: 1 %}
    <div>
        Build Content  1 - 6
    </div>
{% endfor %}
{% if section.blocks.size >= 6 %}
<button class="expand-button">SHOW MORE</button>
<div class="collapsible-content">
  <div>
        Build Content 7 - End
  </div>
</div>
{%  endif %}

So essentially, I think, I will have a loop for 1 through 6 and a section loop through 7 until the end but I am not sure what the syntax is for that.

 

Right now all 7 are written and a but gets placed, I'm just not sure how (or even if it is possible) to break that section block into 2 pieces based upon an integer, in this case 6.

Reply 1 (1)

tim
Shopify Partner
3911 394 1435

for has limit and offset parameters

 

{% for block in section.blocks limit: 6 %}
  ...
{% endfor %}
{% if section.blocks.size >= 6 %}
  <button class="expand-button">SHOW MORE</button>
  <div class="collapsible-content">
    {% for block in section.blocks offset: 6 %}
      ...
    {% endfor %}
  </div>
{%  endif %}

 

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com