main-product .liquid
{%- when 'html_tab' -%}
{% assign tab_content = '' %}
{% case block.settings.heading %}
{% when 'tab_content_1' %}
{% assign tab_content = product.metafields.custom.tab_1_content_new %}
{% when 'tab_content_2' %}
{% assign tab_content = product.metafields.custom.tab_2_content_new %}
{% when 'tab_content_3' %}
{% assign tab_content = product.metafields.custom.tab_3_content_new %}
{% when 'tab_content_4' %}
{% assign tab_content = product.metafields.custom.tab_4_content_new %}
{% when 'tab_content_5' %}
{% assign tab_content = product.metafields.custom.tab_5_content_new %}
{% endcase %}
{% if tab_content != blank %}
<div class="product__custom_accordion acc-tab-content tab-custom-html">
<div class="acc-container">
<div class="acc">
<div class="acc-head{% if block.settings.active_tab != blank %} active{% endif %}">
<p>
<span style="width: calc(100% - 12px);">
{{ block.settings.heading1 }}
</span>
<span class="plus">{{ 'arrow-down.svg' | inline_asset_content }}</span>
<span class="minius">{{ 'arrow-up.svg' | inline_asset_content }}</span>
</p>
</div>
<div class="acc-content" {% if block.settings.active_tab != blank %}style="display: block;"{% endif %}>
{{ tab_content }}
</div>
</div>
</div>
</div>
{% endif %}
{
"type": "html_tab",
"name": "HTML Tab",
"settings": [
{
"type": "text",
"id": "heading1",
"label": "Heading"
},
{
"type": "select",
"id": "heading",
"label": "Heading",
"options": [
{ "value": "tab_content_1", "label": "Tab Content 1" },
{ "value": "tab_content_2", "label": "Tab Content 2" },
{ "value": "tab_content_3", "label": "Tab Content 3 " },
{ "value": "tab_content_4", "label": "Tab Content 4 " },
{ "value": "tab_content_5", "label": "Tab Content 5 " },
],
}
]
},
