- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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 !

- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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>