Need help creating collapsible rows automatically through conditions

Technical Q&A
1

So I’m using dawn theme on my store and I haven’t yet launched it since it isn’t ready, anyways I searched around and found a way to put my product description inside a collapsible row which was really helpful.

I have a problem however, while working on my product I inserted a size chart table in my description and I would like for it to have its own collapsible row. There is an application I found that could help me do that by creating a collapsible row if certain conditions are met, example H3 tags which works in my condition. Is there a way I could do that through code? Thank you.

2

Yes, you can achieve a collapsible row for your size chart table by adding custom code to your Dawn theme. Here’s a general approach you can follow:

  1. Identify the HTML element that wraps your size chart table. For example, it might be wrapped in a <div> or a specific <section> element.

  2. Add a specific class or ID to the wrapper element of your size chart table. This will help you target it with CSS and JavaScript.

  3. Modify the code provided by the application you found to create a collapsible row based on certain conditions. In your case, you mentioned using H3 tags as the condition. Here’s an example of how the code might look:

{% if product.description contains '### Size Chart' %}
  
    ### Size Chart
    
      
    

  

{% endif %}
  1. Add CSS styles to hide the collapsible content by default and toggle its visibility when the row is clicked. Here’s an example CSS code:
.collapsible-row .collapsible-content {
  display: none;
}

.collapsible-row.active .collapsible-content {
  display: block;
}
​

$(document).ready(function() {
  $('.collapsible-row').click(function() {
    $(this).toggleClass('active');
  });
});
3

Hello, I tried doing that but unfortunately it didn’t work.

Perhaps because the description is already modified and the content is inside an accordion?

Here is the link for my site: https://pochni.com/

Password: 123123

I would really appreciate your help, thank you so much