Jump to content

Welcome, Guest!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

  • 0
SeaSky

Collapsible text block for CMS (FAQs)

Question

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

Share this post


Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0
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) >

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×