'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