Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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.
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 %}
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024