Dawn - Split text between accordions on Product page

[GrahamT]

Hi everyone thank you so much for checking in.

Theme Preview: https://dpgjcitvo31i7nl4-58248331452.shopifypreview.com

On my product pages, I would like:

Description Part 1

Accordion 1 (Contains Ingredients)

Accordion 2 (Contains Nutritional Table).

I am very close to getting this, and have been able to put just the Nutritional Table in an Accordion via <---split---> code. 

How do I amend this code to include the 2nd Accordion (Ingredients) via the split method? I have already got the split tags in the product descriptions that I need.

I have Split First and Split Last code - but is there a way to do Split First, Split 2nd, Split 3rd etc?

main-product.liquid:

{%- if product.metafields.my_fields.collapsible_description == true -%}
  {%- if product.description contains '<!-- split -->' -%}
    <div class="product__description rte quick-add-hidden">
      {{ product.description | split: '<!-- split -->' | first }}
    </div>
    <div class="product__accordion accordion quick-add-hidden" {{ block.shopify_attributes }}>
      <details id="Details-{{ block.id }}-{{ section.id }}">
        <summary>
          <div class="summary__title">
            {% render 'icon-accordion', icon: 'plant' %}
            <h3 class="h4 accordion__title">
              Nutritional Info
            </h3>
          </div>
          {% render 'icon-caret' %}
        </summary>
        <div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
          {{ product.description | split: '<!-- split -->' | last }}
        </div>
      </details>
    </div>
	{%- else -%}
    <div class="product__accordion accordion quick-add-hidden" {{ block.shopify_attributes }}>
      <details id="Details-{{ block.id }}-{{ section.id }}">
        <summary>
          <div class="summary__title">
            {% render 'icon-accordion', icon: 'plant' %}
            <h2 class="h4 accordion__title">
              Nutritional Info
            </h2>
          </div>
          {% render 'icon-caret' %}
        </summary>
        <div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
          {{ product.description | split: '<!-- split -->' | last }}
        </div>
      </details>
    </div>
	{%- endif -%}
{%- else -%}
  <div class="product__description rte quick-add-hidden">
    {{ product.description }}
  </div>
{%- endif -%}

Product description code so you can see where I have put splits: 

<p><b>Organic | Vegan | Palm-oil Free | Refined Sugar Free</b></p>
<p>65% CACAO</p>
<p>Dressed to impress in a cacao powder tuxedo! These chocolate almonds aren't just snack goals; they're award-winning deliciousness! Nourish your cravings and savour the greatness – because snacks this good deserve a standing ovation!<br data-mce-fragment="1">Awards: Nourish, Great Taste</p>
<!-- split --> <strong>almonds</strong> (32%), <span data-mce-fragment="1">coconut blossom sugar, raw cacao mass, </span>cacao butter, raw lucuma, cacao powder, vanilla. Cacao solids min: 65%.
<p>For allergens see ingredients in<strong data-mce-fragment="1"> bold</strong>.</p>
<p><strong data-mce-fragment="1">MAY CONTAIN NUTS. STORE IN A COOL DARK PLACE, 18°C. GLUTEN FREE</strong></p>
<p>Packaging is <strong data-mce-fragment="1">home compostable | biodegradable | recyclable</strong></p>
<!-- split -->
<table>
<thead>
<tr>
<th>Nutritional values per</th>
<th>100g</th>
<th>25g</th>
</tr>
</thead>
<tbody>
<tr>
<td>ENERGY (kJ)</td>
<td>2,421</td>
<td>605</td>
</tr>
<tr>
<td>ENERGY (kcal)</td>
<td>580</td>
<td>145</td>
</tr>
<tr>
<td>FAT (g)</td>
<td>44.4</td>
<td>11.1</td>
</tr>
<tr>
<td>SATURATES (g)</td>
<td>19.1</td>
<td>4.8</td>
</tr>
<tr>
<td>CARBOHYDRATE (g)</td>
<td>31.8</td>
<td>8.0</td>
</tr>
<tr>
<td>of which SUGARS (g)</td>
<td>23.4</td>
<td>5.9</td>
</tr>
<tr>
<td>DIETARY FIBRE (g)</td>
<td>10.6</td>
<td>2.7</td>
</tr>
<tr>
<td>PROTEIN (g)</td>
<td>10.2</td>
<td>2.6</td>
</tr>
<tr>
<td>SALT (g)</td>
<td>0.18</td>
<td>0.05</td>
</tr>
</tbody>
</table>

[tim]

Yes, of course. See example:

{% capture description %}
first
<!-- split -->
second
<!-- split -->
third
{% endcature %}

{% assign parts = description | split: "<!-- split -->" %}

{{ parts.first }}
  first
{{ parts[0] }}
  first
{{ parts[1] }}
  second

{% for part in parts %}
  {{ forloop.index0 }}: {{ part }}
{% endfor %}
  0: first
  1: second
  2: third

{% if parts.size > 1 %}
  {% for part in parts %}
    {% unless forloop.first %}
      {{ part }}
    {% endunless %}
  {% endfor %}
{% endif %}
  second
  third

In your case I would be thinking about how you can be flexible with collapsible titles or every product will have the same set of collapsibles?