'LIQUID: How to hide an accordion if there is no content for it in the LIQUID file?
Code below does create accordion in Shopify product pages. I'm looking for a way to hide accordion if it has no content to display. Each accordion is an unique radio button so I thought it desirable to set display:none to an accordion that doesn't have any content. The change I made in the main code pasted below is as. I prefer a solution without using JavaScript. I'm not sure how to add JavaScript in the middle of LIQUID file that helps set display:none. I don't want to use jQuery to solve it.
{% when 'custom' %}
{% if block.settings.customContent == empty %}
<input type="radio" name="{{block.id}}" style="display:none;">
{% else %}
{{block.settings.customContent}}
{% endif %}
Main code below:
<div class="col-12 accordion product__accordion {% if block.settings.noMargin or noMargin %}margin__bottom--reduced{%endif-%}">
<input type="radio" id="{{block.id}}--close" name="{{block.id}}">
<label class="accordion__item" {{block.shopify__attrbutes}}>
<input type="radio" name="{{block.id}}">
<span class="accordion__item--title">{{block.settings.heading}}<label class="collapse" for="{{block.id}}--close"></label></span>
<div class="accordion__item--content inherit {% if block.settings.content == 'description' or block.settings.content contains 'page' %}{% endif %}">
{%- case block.settings.content %}
{% when 'description' %}
{% comment %}{{product.description}} {%endcomment %}
{%if block.settings.heading == "Description" %}
{%- assign description = product.description -%}
{%- assign description = description | split:'[content]' | last -%}
{%- assign description = description | split:'[impact]' | first -%}
<div>{{ description }}</div>
{% elsif block.settings.heading == "Impact" %}
{%- assign description = product.description -%}
{%- assign description = description | split:'[impact]' | last -%}
{%- assign description = description | split:'[/impact]' | first -%}
<div>{{ description }}</div>
{% endif %}
{% when 'reviews' %}
{% if settings.reviewApp == "loox" %}
<div id="looxReviews" data-product-id="{{product.id}}" class="loox-reviews-default">{{ product.metafields.loox.reviews }}</div>
{% elsif settings.reviewApp == "shopifyReviews" %}
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
{% elsif settings.reviewApp == "alireviews" %}
<div id="shopify-ali-review" product-id="{{ product.id }}"> {{ shop.metafields.review_collector.review_code }} </div>
{% endif %}
{% when 'custom' %}
{% if block.settings.customContent == empty %}
<input type="radio" name="{{block.id}}" style="display:none;">
{% else %}
{{block.settings.customContent}}
{% endif %}
{% when 'page' %}
{% assign page = pages[block.settings.page] %}
{{page.content}}
{% when 'productPage' %}
{% assign page = pages[product.handle] %}
{{page.content}}
{% endcase %}
</div>
</label>
</div>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
