Re: collapsible columns and rows

Store Design
, ,

Topic summary

A user working with Shopify’s Dawn theme sought help with two customization issues for collapsible elements:

Issue 1: Changing arrow icons to +/- symbols

  • Initially solved by adding JavaScript code to assets/product-info.js that manages accordion behavior
  • Further refined with CSS to properly position the icons using Flexbox layout
  • Final solution includes hiding default caret icons and styling custom plus/minus SVG icons

Issue 2: Auto-closing other sections when one opens

  • Resolved by implementing JavaScript that listens for click events on accordion elements
  • Code removes the ‘open’ attribute from other accordions when a new one is clicked
  • Ensures only one collapsible section remains open at a time

Current Status:

  • Both original issues marked as solved
  • User successfully combined solutions from two contributors
  • Added custom CSS for proper icon alignment (space-between, margin-left: auto)
  • User now asking if the same functionality can be extended to “collapsible content” sections, indicating the solution currently only works for product accordions

Code snippets provided include JavaScript for accordion management and CSS for icon positioning.

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

Hello,

Step 1: Navigate to your Shopify admin panel and go to “Online Store.”

Step 2: Click on “Themes” and then select Edit code

Step 3: Find base.css

If you insert this js script in your theme assets/product-info.js file it will solve your issues

document.querySelectorAll('.product__accordion details').forEach((accordion) => {
    accordion.addEventListener('click', function() {
        document.querySelectorAll('.product__accordion details').forEach((otherAccordion) => {
            // Close other accordions if they are open and not the one clicked
            if (otherAccordion !== accordion) {
                otherAccordion.removeAttribute('open');
            }
        });
    });
});

Arif_Shopidevs_0-1726985911023.png
Arif_Shopidevs_0-1726985911023.png1044×822 14.7 KB

Hope your issue will be solved

thank you

2 Likes