Collapsible text block for CMS (FAQs)

[SeaSky]

Greetings everyone,

As the title suggest I am trying to make a FAQ page with Collapsible text blocks, but when I implement the w3 code the collapsible blocks don't expand or contract on click.

Any ideas why is this happening? Thanks in advance for your help!

This code is in themes/community-theme-default/js/cms.js:

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

for (i = 0; i < coll.length; i++) {
  coll.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";
    }
  });
}

This code is in the FAQs cms page

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

CSS:

.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;
}

[Traumflug]

This is how Core Updater does it:

https://github.com/thirtybees/coreupdater/blob/master/views/js/controller.js#L289

It's JavaScript only (using Bootstrap features), no template, CSS or HTML changes needed. To get this working elsewhere, adjusting usage of the field parameter should be sufficient.

[SeaSky]

21 hours ago, Traumflug said:

This is how Core Updater does it:

https://github.com/thirtybees/coreupdater/blob/master/views/js/controller.js#L289

It's JavaScript only (using Bootstrap features), no template, CSS or HTML changes needed. To get this working elsewhere, adjusting usage of the field parameter should be sufficient.

Hello Traumflug,

Thanks for your answer! Unfortunately my knowladge is limited, tried to implement your solution with no luck.

I ended up using an alternative solution, similiar to the one I posted previously, that I found on the french ps forum, not a french speaker but the post is quite understandable.

I'll leave the link to the solution in case that is useful to someone.

Collapsible text block for CMS (FAQs) >