アコーディオンメニューの構築に関して

STUDIO
1

Q&Aにてアコーディオンを実現するために、GTMでカスタムHTMLを設定しています。
ページをリロードすると、scriptが反映されているようでアコーディオンが機能するのですが、ページ遷移した後だと、アコーディオンが機能しなくなってしまいます。
ページを最初に読み込んだ際しか、カスタムHTML内のjavascriptが実行されていないようで、おそらくSingle Page Applicationであることが影響しているのかと思われますが、どのようにGTMを設定 または javascriptを書き換えすれば問題解決できますでしょうか？
gtmのカスタムHTMLのトリガーには、「ウィンドウ読み込み」を設定しております。
何卒、よろしくお願いいたします。

2

カスタムHTMLにはこちらを記載しています。

 
 -----
<style>
 .accordion__answer--active {
 height: auto !important;
 padding-top: 16px !important;
 }
</style> 
 <script>
 "use strict"; 
 var accordion = document.querySelector("#accordion");
 var index;
 accordion.style.cursor = "pointer"; 
 accordion.addEventListener("click", function (e) {
 e.preventDefault();
 var clickedAccordionItem = e.target.closest("#accordion > div");
 var accordionItems = document.querySelectorAll("#accordion > div");
 
 if (!clickedAccordionItem) return;
 var clickedAccordionAnswer = clickedAccordionItem.children[1];
 
 if ( clickedAccordionAnswer.classList.contains("accordion__answer--active") == true ) {
 clickedAccordionAnswer.classList.remove("accordion__answer--active");
 } else {
 clickedAccordionAnswer.classList.add("accordion__answer--active");
 } 
 });
</script>
-----
「いいね！」 1
3

以前、この症状の解決方法をブログにまとめましたので、こちらをご参照ください。
具体的には、ページの遷移先をURL指定する、または自分のサーバーにアップロードしたものをiFrameから呼び出せば解決できます。

「いいね！」 1
4

ありがとうございます！
理解できました。
ページの遷移先をURL指定にする方法、大変参考になりました。
ありがとうございます！