Description
- each product will have a different accordion (different info)
- there is no automatic way to do this, but we can use a faster way to add with Text Block (with specific format), instead of using default Accordion Block
#1. First, use this code to Code Injection > Footer
<script>
// tuanphan - 27-01-2025
const excerpt = document.querySelector('.ProductItem-details-excerpt');
const content = excerpt.innerHTML;
const startMarker = '###-###';
const endMarker = '###-####';
const startIndex = content.indexOf(startMarker);
const endIndex = content.indexOf(endMarker);
if (startIndex !== -1 && endIndex !== -1) {
const accordionHtml = content.substring(startIndex + startMarker.length, endIndex);
const accordionDiv = document.createElement('div');
accordionDiv.className = 'accordion-wrapper';
const sections = accordionHtml.split(/<h2[^>]*>/).filter(Boolean);
sections.forEach(section => {
const titleMatch = section.match(/<span>(.*?)<\/span>/);
const contentMatch = section.match(/<\/h2>.*?<p[^>]*><span>(.*?)<\/span>/s);
if (titleMatch && contentMatch) {
const title = titleMatch[1];
const content = contentMatch[1];
const accordion = `
<div class="accordion">
<div class="accordion-title">${title}</div>
<div class="accordion-content">${content}</div>
</div>
`;
accordionDiv.innerHTML += accordion;
}
});
excerpt.innerHTML = excerpt.innerHTML.replace(content.substring(startIndex, endIndex + endMarker.length), accordionDiv.outerHTML);
document.querySelectorAll('.accordion-title').forEach(title => {
title.addEventListener('click', () => {
const content = title.nextElementSibling;
const isActive = title.classList.contains('active');
document.querySelectorAll('.accordion-title').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.accordion-content').forEach(c => c.classList.remove('show'));
if (!isActive) {
title.classList.add('active');
content.classList.add('show');
}
});
});
}
</script>
#2. Use this code to Custom CSS
/* accordion */
.accordion {
margin-bottom: 10px;
}
.accordion-title {
background: #f7f7f7;
padding: 10px;
cursor: pointer;
border: 1px solid #ddd;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
}
.accordion-title::after {
content: '+';
font-size: 20px;
}
.accordion-title.active::after {
content: '-';
}
.accordion-content {
padding: 15px;
border: 1px solid #ddd;
border-top: none;
display: none;
border-radius: 0 0 4px 4px;
}
.accordion-content.show {
display: block;
}
#3. Edit Product Description, use this format
#4. Result
#5. Customize
To change background color
change these lines.
To change line around accordion title/content, change this.
To change Plus/Minus icon, change these.