How to add product descriptions to collapsable tabs in Boost theme?

Store Design

Topic summary

A user working with the paid Boost theme wants to move product descriptions into a collapsible tab by default instead of displaying them in the standard format.

Another user provided a code solution involving:

  • HTML markup using {{ product.description | escape }} within a collapsible structure
  • JavaScript to handle the collapse/expand functionality with event listeners and class toggling

The code appears partially corrupted or reversed in the original post, but demonstrates the basic approach of wrapping the product description in collapsible HTML elements and adding interactive JavaScript controls. The solution requires custom code implementation rather than a built-in theme setting.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I am using the paid for theme ‘Boost’ and would like add my product description to a collapsable tab by default. Is there a simple way to do this?

2

Use this code for tabs


    
    

        {{ product.description | escape }}
    


const collapsibleBtn = document.querySelector('.collapsible-btn');
const collapsibleContent = document.querySelector('.collapsible-content');

collapsibleBtn.addEventListener('click', () => {
    collapsibleContent.classList.toggle('active');
});