Accordion CMS Page - JS not working

[usmanmugha107f]

Hi,
Trying to create CMS page with FAQ's. While testing with simple Code from W3CSchool https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol . It shows fine with CSS but Script not working. Have tried using Layout Update XML also but unable to get it work. Any suggestions please.

[gaurav_harsh1]

Hello @usmanmugha107f ,

You cannot put JS core directly in the editor for CMS pages, there are some ways you can add JS explicitly, try below solutions if work for you :

https://magento.stackexchange.com/a/239026

Hope it helps !

[usmanmugha107f]

Hi,

Thank you for your reply. 

Apologies for not being clear in my original question. 

I had use this approach and did not directly included JS in CMS page. 
Please see below code what and where I have used.

Code for Main CMS Page.
My JS file and its reference

Ref in Design > Layout Update XML

<reference name="head">
   <action method="addItem">
      <type>skin_js</type>
      <name>js/faq.js</name>
      <params/>
   </action>
</reference>

Code

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}

CMS PAGE CODE

<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
<p><button class="accordion">Section 1</button></p>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<p><button class="accordion">Section 2</button></p>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<p><button class="accordion">Section 3</button></p>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>