collapsible columns and rows

[mOONbOOTS]

Hello,

I have a two part question regarding collapsible columns and rows.

One:

How do I change the collapsible column and row arrows to + and - symbols on the Dawn Shopify theme?

Two:

How do I make one collapsible row or column close when another one is opened so only one is open at a time?

Here is a link to the theme I am using and how I am currently running it: https://themes.shopify.com/themes/dawn/styles/default/preview 

Thank you!

[Arif_Shopidevs · Accepted solution]

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');
            }
        });
    });
});

Hope your issue will be solved

thank you

[Arif_Shopidevs · Accepted solution]

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');
            }
        });
    });
});

Hope your issue will be solved

thank you

[Arif_Shopidevs]

do not forget to made the post as solved , it will help other to know 🙂

[mOONbOOTS]

Thank you for the prompt reply!

The code you provided does work for having one collapsible row open at a time.

Would you know how to change the columns arrows to plus and minus icons by chance?

[Sam416 · Accepted solution]

1. HTML Structure

Ensure your HTML structure for each accordion section includes the summary and details tags, and that there is a place for the icons:

2. CSS to Hide Existing Caret Icons

Add CSS to hide any existing caret icons within the summary:

/* Hide the default caret SVG within the summary */
.product__accordion details summary .icon-caret {
display: none;
}

3. JavaScript to Manage Accordion State and Icons

Ensure your JavaScript handles the toggle of the plus/minus icons and manages opening and closing of the accordions:

// Define SVG icons
const plusIcon = `<svg class="plus-icon" width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 12H18M12 6V18" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>`;

const minusIcon = `<svg class="minus-icon" width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 12H19" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>`;

document.querySelectorAll('.product__accordion details').forEach((accordion) => {
const summary = accordion.querySelector('summary');
const titleDiv = summary.querySelector('.summary__title');

// Add plus icon initially to all closed accordions
if (!accordion.hasAttribute('open')) {
titleDiv.innerHTML += plusIcon;
} else {
titleDiv.innerHTML += minusIcon;
}

accordion.addEventListener('click', function(event) {
// Prevent default behavior to properly handle the state
event.preventDefault();

document.querySelectorAll('.product__accordion details').forEach((otherAccordion) => {
if (otherAccordion !== accordion) {
otherAccordion.removeAttribute('open');

// Replace minus icon with plus icon for other accordions
const otherSummary = otherAccordion.querySelector('summary');
const existingMinusSvg = otherSummary.querySelector('.minus-icon');
if (existingMinusSvg) {
existingMinusSvg.remove();
otherSummary.querySelector('.summary__title').innerHTML += plusIcon;
}
}
});

// Toggle the current accordion
const isOpen = !accordion.hasAttribute('open');
const svgIcon = summary.querySelector('.plus-icon, .minus-icon');
if (svgIcon) {
svgIcon.remove();
}

if (isOpen) {
accordion.setAttribute('open', '');
summary.querySelector('.summary__title').innerHTML += minusIcon;
} else {
accordion.removeAttribute('open');
summary.querySelector('.summary__title').innerHTML += plusIcon;
}
});
});

If this solution works for you, please consider accepting it as a solution so that it can help others in the community as well. If you have any questions or need further assistance, feel free to ask. Happy coding!

[mOONbOOTS]

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.

[Sam416]

@mOONbOOTS 

  If you don't mind can you share the url of the store? I can check and help you.

[mOONbOOTS]

Is there any chance to make this work for the collapsible content too?

I tried changing .product__accordion details to a few different things, but that did not work.

[mOONbOOTS]

I appreciate the help from you both!

@Arif_Shopidevs, you helped solve issue number 1, and @Sam416, you helped solve number 2.

I was able to align the plus and minus icons using some CSS.

.summary__title {
  display: flex; /* Use Flexbox for layout */
  justify-content: space-between; /* Distribute space between title and icon */
  align-items: center; /* Vertically center the title and icon */
  width: 100%; /* Ensure the summary takes full width */
}
.icon-container {
  display: flex; /* Use Flexbox for proper centering */
  align-items: center; /* Vertically center the icon */
  margin-left: auto; /* Push the icon container to the far right */
}
.plus-icon,
.minus-icon {
  width: 24px; /* Set icon width */
  height: 24px; /* Set icon height */
}

Thank you!