How to add a collapsible accordion to a static page

Hi Craig, hi guys,

Can you please advise how to create a page with collapsible content?
I would like to replicate what these guys do to build my T&Cs page. Too much text could be overwhelming. I thought collapse elements will serve here great. i.e.

I found this which works when I build a simple page on Notepad++ but how to do it with Magento.

Please give me some tips?
Thank you.

Just literally copy and paste the 3 elements (CSS, JS, HTML) from the w3schools.com example to a standard CMS Page (Content Section). Then tidy it up as follows:

<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
</style>
<h2>Animated Collapsibles</h2>

<p>A Collapsible:</p>
<button class="collapsible">Open Collapsible</button>
<div class="content">
  <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>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
  <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>
<button class="collapsible">Open Section 2</button>
<div class="content">
  <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>
<button class="collapsible">Open Section 3</button>
<div class="content">
  <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>

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>

There is zero point in making it complicated by loading CSS and JS in separate files for this scenario, because the code is only relevant to this single page. The only different I’d make in Production is just minifying the CSS and JS.

Be sure to swap out any generic CSS Classes (as mentioned in my post further down).

Great. Thank you Craig.

Hi,

I’ve just noticed that the code is braking my header.

Any idea how to customize the script so it won’t affect the header?

Pawel

That’s not the script, that’s just a very basic CSS conflict. Just rename the CSS Classes to something unique and identifiable. For example change the following references in the CSS, HTML and JS:

  • Change collapsible to terms-collapsable
  • Change content to terms-content

When developers write example code, they almost always use generic labels. You should always change these when using them in your own project.

Thank you very much. :slight_smile: