Hide empty Collapsible Row in Dawn

Store Design
,
1

We sell a variety of seedlings on our website. We also sell some growing supplies. These products all use the same product template.

I have created a metafield that contains the embed link for a youtube video. I have added a collapsible row with custom liquid and the metafield for the video is in there. It is displaying correctly on products (example here https://8c4caf-34.myshopify.com/products/lettuce-starfighter).

The problem is not all of the products have a product video, so I want to hide the empty element so it doesn’t show an empty collapsible row.

I followed this video. https://youtu.be/6XSuYF3rNa4?si=zkdD6Ps5-HngVzFV but the javascript isn’t hiding the empty accordions.

Here is the javascript I added in a custom liquid on the template.

{% if product.metafields.custom.video == blank %}
<script>
document.querySelectorAll('.accordion__title').forEach(function(title) {
if (title.textContent.includes('Video')) {
const parentElement = title.closest('.product__accordion');
if (parentElement) {
parentElement.style.display = 'none';
}
}
});
</script>
{% endif %}

Why is it not hiding the empty accordions? Here’s a product with an empty accordion. https://8c4caf-34.myshopify.com/products/tower-garden-timer

2

Hi @DeeLT ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code

EBOOST_1-1672356985580.png
EBOOST_1-1672356985580.png532×438 15.6 KB

  1. sections/main-product.liquid

  2. Find code “{%- when ‘collapsible_tab’ -%}”

  3. Refer screenshot to add code

{%  if block.settings.content != blank or block.settings.page.content  != blank %}

{%  endif %}

EBOOST_0-1718253962801.png
EBOOST_0-1718253962801.png1253×770 78.5 KB

3

Hi @DeeLT

You can simply do that by adding this code to the theme.liquid file, after
4

Thanks for that, however it is removing accordions that are not empty too, as shown in the loom. https://www.loom.com/share/053b9204e3c54640abea95f003d6809e?sid=85a51fcc-fa47-4b21-82b9-a08737161a9c

5

Thanks! Works like a charm. I have two follow up questions.

  1. This shows those that contain “iframe”. I have another collapsible row that displays certain metafields on the product. How can I hide the section if the product doesn’t have those metafields defined?

Here is a page WITH those “Crop Properties” metafields. https://8c4caf-34.myshopify.com/products/vegetables-pepper-aura

Here is a page WITHOUT those “Crop Properties” metafields. https://8c4caf-34.myshopify.com/products/20-net-pots

  1. Adding this code is great, and gets my site where I want it, but is there an easy way to ensure it stays when updating the theme? Or do I just need to manually paste it after updating the theme?
6

I figured it out. I inspected the page to find the ID for the other collapsible rows. I said if one has (p) and the other has (a). Works like a charm.

7

This worked! Thanks.

8

Where is the code? I need to update my theme and add this code and I didn’t make a note of it. I can’t remember where I made this change to grab the code and copy it to the updated theme.