タイプライター風テキストアニメーション

<details>
  <summary>支払方法</summary>
  <div>
    <p data-text='現金、クレジットカード、PayPay'></p>
  </div>
</details>
<details>
  <summary>支払方法</summary>
  <div>
    <p data-text='現金、クレジットカード、PayPay'></p>
  </div>
</details>

document.addEventListener("DOMContentLoaded", function() {
  document.querySelectorAll("details").forEach(details => {
    const p = details.querySelector("p");
    const dataText = p.getAttribute("data-text");

    datails.addEventListener("toggle", function() {
      if (!datails.open) return; 
      p.textContent = "";
      p.style.borderRight = "2px solid #132127";
    
      [...dataText].forEach((char, i) => {
        setTimeout(() => p.textContent += char, 50 * i);
      });
    });
  });
});