Accordion

<div class="product-info-block">
 <div class="accordion">
   <div class="accordion-item">
     <div class="accordion-header">
       <t4>DESCRIPTION</t4>
       <img class="icon" src="https://res.cloudinary.com/dixyq8hvr/image/upload/v1748012635/down-arrow_tt0zzn.png">
     </div>
     <div class="accordion-content">
       <t5>This item is made from ultra-soft fabric, designed for all-day comfort. Perfect for casual wear or lounging,
         it brings effortless style to your wardrobe.</t5>
     </div>
   </div>
   <div class="accordion-item">
     <div class="accordion-header">
       <t4>SHIPPING &amp; RETURNS</t4>
       <img class="icon" src="https://res.cloudinary.com/dixyq8hvr/image/upload/v1748012635/down-arrow_tt0zzn.png">
     </div>
     <div class="accordion-content">
       <ol>
         <li>We offer free standard shipping and returns within the US. View our <a href="#">shipping policy</a>.</li>
         <li>View our full <a href="#">return policy here</a>.</li>
         <li>Request return/exchange within 10 days. No international exchanges.</li>
         <li>Extended return policy during holidays. <a href="#">Learn more</a>.</li>
       </ol>
     </div>
   </div>
   <div class="accordion-item">
     <div class="accordion-header">
       <t4>CARE INSTRUCTIONS</t4>
       <img class="icon" src="https://res.cloudinary.com/dixyq8hvr/image/upload/v1748012635/down-arrow_tt0zzn.png">
     </div>
     <div class="accordion-content">
       <t5>Machine wash cold with like colors. Do not bleach. Tumble dry low. Cool iron if needed.</t5>
     </div>
   </div>
   <div class="accordion-item">
     <div class="accordion-header">
       <t4>SIZING &amp; FIT</t4>
       <img class="icon" src="https://res.cloudinary.com/dixyq8hvr/image/upload/v1748012635/down-arrow_tt0zzn.png">
     </div>
     <div class="accordion-content">
       <t5>Model is 5'9" and wears size Small. This item runs true to size. Refer to our <a href="#">size guide</a>.</t5>
     </div>
   </div>
 </div>
</div>

body {
 padding: 0 12px;
}
.product-info-block {
 max-width: 500px;
}
.accordion-header {
 width: 100%;
 padding: 12px 0;
 font-size: 16px;
 color: #111;
 text-align: left;
 background: none;
 border: none;
 display: flex;
 justify-content: space-between;
 align-items: center;
 cursor: pointer;
}
.accordion-header t4 {
 font-weight: 500;
 font-size: 15px;
}
.accordion-content {
 display: none;
 padding: 8px 0 8px;
}
.accordion-content t5 {
 font-size: 15px;
 color: #333;
 line-height: 1.6;
 display: block;
 font-weight: 400;
}
.accordion-content ol {
 padding-left: 20px;
 margin-top: 0;
}
.accordion-content li {
 margin-bottom: 4px;
 font-size: 15px;
 color: #333;
 line-height: 1.6;
}
.accordion-content a {
 color: #000000;
 text-decoration: underline;
}
.icon {
 width: 10px;
 height: 10px;
}

// ✅ Resize the block dynamically via SDK
async function resizeBlock(container = ".product-info-block") {
 try {
   await VajroSDK.actions.resizeBlock(container);
   console.log("📏 resizeBlock triggered for", container);
 } catch (err) {
   console.error("❌ resizeBlock failed:", err);
 }
}
// ✅ Handle accordion open/close interactions
const headers = document.querySelectorAll(".accordion-header");
headers.forEach((header) => {
 header.addEventListener("click", () => {
   const item = header.parentElement;
   const isOpen = item.classList.contains("active");
   // ❌ Close all other open accordions
   document.querySelectorAll(".accordion-item").forEach((el) => {
     el.classList.remove("active");
     const icon = el.querySelector(".icon");
     const content = el.querySelector(".accordion-content");
     if (icon) icon.src = "https://res.cloudinary.com/dixyq8hvr/image/upload/v1748012635/down-arrow_tt0zzn.png";
     if (content) content.style.display = "none";
   });
   // ✅ Open selected one
   if (!isOpen) {
     item.classList.add("active");
     const icon = item.querySelector(".icon");
     const content = item.querySelector(".accordion-content");
     if (icon) icon.src = "https://res.cloudinary.com/dixyq8hvr/image/upload/v1748012635/up-arrow_nb4rvs.png";
     if (content) content.style.display = "block";
   }
 });
});
// ✅ Automatically resize on any content change
const container = document.querySelector(".product-info-block");
if (container) {
 const observer = new MutationObserver(() => {
   console.log("🔄 Mutation observed in accordion");
   resizeBlock();
 });
 observer.observe(container, {
   childList: true,
   subtree: true,
   attributes: true,
   characterData: true
 });
} else {
 console.warn("⚠️ '.product-info-block' container not found.");
}