Hello @Sam416 ,
Thank you, that sort of worked. As you can see from my picture below, it adds the plus and minus icons beside the row title instead of where the old icon-caret used to me.
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.jsthat 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.
