What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: collapsible columns and rows

Solved

Re: collapsible columns and rows

mOONbOOTS
Explorer
79 6 11

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?

 

Screenshot_22-9-2024_15411_themes.shopify.com.jpeg

 

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!

Accepted Solutions (2)

Arif_Shopidevs
Shopify Partner
263 37 36

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

 

  

Arif_Shopidevs_0-1726985911023.png

 

 

Hope your issue will be solved

thank you

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers

View solution in original post

Sam416
Shopify Partner
35 2 4

This is an 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!



Shopify Expert | E-commerce Specialist | Custom Shopify App Development | Shopify Theme Customization & Bug Fixing | Buy Me A Coffee| Hire me| Contact Me on WhatsApp

View solution in original post

Replies 8 (8)

Arif_Shopidevs
Shopify Partner
263 37 36

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

 

  

Arif_Shopidevs_0-1726985911023.png

 

 

Hope your issue will be solved

thank you

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
Arif_Shopidevs
Shopify Partner
263 37 36

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

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
mOONbOOTS
Explorer
79 6 11

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
Shopify Partner
35 2 4

This is an 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!



Shopify Expert | E-commerce Specialist | Custom Shopify App Development | Shopify Theme Customization & Bug Fixing | Buy Me A Coffee| Hire me| Contact Me on WhatsApp
mOONbOOTS
Explorer
79 6 11

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.

Screenshot_22-9-2024_11237_admin.shopify.com.jpeg

Sam416
Shopify Partner
35 2 4

@mOONbOOTS 

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

Shopify Expert | E-commerce Specialist | Custom Shopify App Development | Shopify Theme Customization & Bug Fixing | Buy Me A Coffee| Hire me| Contact Me on WhatsApp
mOONbOOTS
Explorer
79 6 11

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
Explorer
79 6 11

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!