How to add a collapsible accordion to a static page

Magento 2 Frontend Design
1

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.

1 Like
2

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).

1 Like
3

Great. Thank you Craig.

4

Hi,

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

collapsable
collapsable.jpg1502Ă—806 65.2 KB

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

Pawel

5

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.

6

Thank you very much. :slight_smile:

7

Hi Craig,
I have just been doing some work on this and the information you provided has been very helpful, so thank you.

I wondered though if it is possible to make the accordion pick up a colour via code/short code. I have one installation of magento with multi-site, currently there are 2 websites and 3 stores and 5 store views. each has its own colour scheme (or at least may do in the future).I am using Ultimo theme and wanted to make the colours match each site. But I dont want to add a new page for each as this will add numerous extra pages I am using the accordion to display content on several pages but using short codes to insert site name etc.

My idea scenario would be to use a magento variable/short-code to select a colour. Is this possible?

I suggest the short code approach as I would ideally like the colour to be linked to colours in my sites design and if i changed the colour scheme it in Manento Admin it would change the accordion colour. I would happily chose a colour that is used for another element of the colour scheme, such as the footer links, I just want to ensure my colour scheme is maintained.

To help look at the two sites http://gamedepot.eu/privacy-policy and http://technologyandmedia.co.uk/privacy-policy and you will see that using current scheme colours content does not stand out currently and choosing black or a grey does not fit into both colour schemes… But using the colours scheme of the footer links might work.

Any help would be appreciated. And I am sure the approach would be useful to someone else in the future.

Thanks

Michael

8

Yes, this can definitely be achieved, although the exact implementation is a little outside my skillset. Off the top of my head you could explore:

  1. Converting the original solution to it’s own module, which would allow you to add a adminhtml element to interact with in the backend settings
  2. Same as above but reference one of the key Ultimo settings for that particular storeview
  3. Take the class responsible for the element you want to copy and add it to your class in the accordion. (see below)

So, for example… (And this requires a little luck that the class you use only controls colour). In the technology site, you have:

.footer-bottom-container {
    background-color: #8d99ae;
}

So, you could just copy footer-bottom-container and add it to your accordion class like so:

<button class="collapsible-returns footer-bottom-container">

Obviously, you’d have to remove existing background-color: references from your accordion CSS.

I see this more of a “hack” than a proper solution. But it should work with some tweaking.