*

Lucky

  • ***
  • 65 posts
Epsilon - Add accordion to static pages
« on: September 19, 2025, 01:10:12 AM »
Does anyone know how to add an accordion to the static pages?

This is my code, but not working:

HTML:
Code: [Select]
<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>

CSS (Hooked in Header):
Code: [Select]
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

JS (Hooked in Footer):
Code: [Select]
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";
    }
  });
}

Re: Epsilon - Add accordion to static pages
« Reply #1 on: September 30, 2025, 04:20:35 PM »
If you have added a static page via admin, you can not add extra information to it.
The best way is to admin a static page in admin - call it accordian (or something to test it), put nothing in the description, put add as anyone, but not index yet.

Then in your server files, theme, add a page-accordian.php
Copy page.php first, that way it will have Head.php and Footer.php included, just amend basic information first, then, just before </head> add the css and just before </html> add the script
This should work