Is it possible to create another collapsible row inside a collapsible row?

Shopify Discussion
1

Hello Shopify Community,

I’m working on a project where I need to implement nested collapsible rows within a collapsed row in Shopify. Currently, my collapsible row structure has the following options:

Title
Icon
Queue Contents
Row Content from Page
However, I want to add a new feature where, when I click on a collapsible row, it opens another “heading,” and when I click on this new heading, another row opens. Finally, when I click on the last heading, the contents of the row should be displayed.
For Example
Click On ‘’ Heading :backhand_index_pointing_up:
Open ‘’ Another Heading :backhand_index_pointing_up: ‘’ Also Click on this then

Open ‘’ Row content ‘’

I’ve been trying to achieve this nested collapsible row structure, but I’m facing some challenges. Has anyone successfully implemented this feature in their Shopify store? If so, could you please share your insights or any code examples that can help me achieve this nested collapsible row functionality?

Your guidance and suggestions would be greatly appreciated. Thank you in advance for your help!

2

Hey Hasibalhasan,

It’s definitely possible, but I wouldn’t recommend it.

This help doc explains the basics of coding a collapsible row: https://www.w3schools.com/howto/howto_js_collapsible.asp

You’d just have a second set of coding within the first set of coding.

Think about the mobile-version of the site though – having a collapsible within a collapsible would look/work poorly. Surely, there must be a better way for you to handle this.

On a side note: if you’re looking for an easy way to create collapsible rows (ie. accordions), this app makes it super-easy (no coding necessary): https://apps.shopify.com/product-description-accordion

Cheers,

Stephen