Apply accordion block all existing products rather than do it one by one

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.

1 Like