Hide empty collapsible tabs in Dawn theme

Technical Q&A
1

Hi, hoping someone can help me with this. I’m using the Dawn theme on a store I’m building for a client, but having some trouble with collapsible tabs on the product pages.

Each product has a set of FAQs, but they differ in number. I need to be able to add up to 10 collapsible tabs, but some of the products will only have data in, say, three of them. Is it possible to hide the tabs that are empty? They’re currently showing as empty lines, like this:

Bev_StickMkting_0-1648145620983.png
Bev_StickMkting_0-1648145620983.png928×541 18.2 KB

Any advice will be much appreciated!

2

Hi @Bev_StickMkting ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

3

Hi @Bev_StickMkting ,

Please go to sections > collapsible-content.liquid file, find ‘section.blocks’ and add code here:

Screenshot.png
Screenshot.png1302×721 66.3 KB

Code:

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

{%- endif -%}

Hope it helps!

4

Amazing! Thank you so much, that’s worked perfectly :blush:

5

Hi, sorry but on Dawn theme i don’t have “sections > collapsible-content.liquid”.

how can i do it?

Thanks

MM

6

Hi @dgallerystore ,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

7

Hi, I tried using this solution, but it didn’t work.

Using the Dawn theme and did exactly as written. As you can see below I added the code to the correct places, saved it but nothing is happening. What am I doing wrong?

Thanks in advance!

Skærmbillede 2022-05-06 kl. 10.57.50.png
Skærmbillede 2022-05-06 kl. 10.57.50.png1834×1114 461 KB

Skærmbillede 2022-05-06 kl. 10.56.55.png
Skærmbillede 2022-05-06 kl. 10.56.55.png2382×1070 144 KB

8

Hi, I’m also having difficulty getting this to work. It seems to work for the collapsible content section but not the collapsible rows within the product information section. Does anyone know how this can be done?

Screenshot 2022-06-07 092344.png
Screenshot 2022-06-07 092344.png538×511 16.8 KB

9

I am also having the same issue

10

After trying to get this to work for a good 30 minutes I realised the solution wasn’t solving the Collapsible row block on the product page (under the description) but rather the Collapsible content section which is a separate feature. To get this to work for the Collapsible rows you need to edit main-product.liquid and put the condition inside ‘collapsible_tab’ case like so:

Pasted_Image_21_8_2022__13_22.png
Pasted_Image_21_8_2022__13_22.png1490×782 111 KB

Code for easy copy/paste

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

Hope this helps someone :grinning_face_with_smiling_eyes:

11

:folded_hands: Thank you for posting your solution, Baldur! This is exactly what I needed. I’m so close to being able to launch my store now that issue has been resolved. :grin:

12

Glad I could help :blush: Good luck :raising_hands:t2:

13

Hi baldur_Helgason,

Thanks for your help.

Cheers.

14

Works like a charm, thanks!
How do I make it so that the entire section is removed if none of the rows has any content?

Thanks in advance!

All the best,
Jacob

15

We’re using Archtype Streamline theme and the solution for us was a bit different.

We only had to change and to or inside tab.liquid file so that the final thing looks like this:

{%- liquid
  assign output_tab = true
  if title == blank or content == blank
    assign output_tab = false
  endif
-%}
16

This helped me! In my case I had prefilled headings and I wanted to hide blank rows, so I ended up using only the block.settings.row_content one and it’s working great. Thank you!

FYI to others - this solution works when you use Collapsible Rows in a different “Collapsible Rows Section.” If you’re trying to hide rows in the product information section, you should try the other solutions that modify the main-product.liquid section. I started off with one and then ran out of blocks and so have moved to the other. So I’m actually using both solutions and they seem to be working well.

17

Perfect thanks :clap:

18

My guy :smiling_face_with_sunglasses:

19

This solution works with Dawn 15.4.0, for those who are looking for the current solution: