cancel
Showing results for 
Search instead for 
Did you mean: 

Accordion CMS Page - JS not working

Accordion CMS Page - JS not working

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.

2 REPLIES 2

Re: Accordion CMS Page - JS not working

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 !

Problem Solved ? Click on 'Kudos' & Accept as Solution to encourage to write more answers !

Re: Accordion CMS Page - JS not working

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>