Simple Toggle content with Accordion

In my forms I use a very simple accordion function to show and hide different fields or even sections of fields. This is super easy to add with a little javascript snippet, a small HTML addition and some styling.

First, we create a new .js template.

Javascript File

Go to pages->templates and click "New" at the bottom of the templates list. Select "Add Javascript file". Place it anywhere you like (I have created a separate folder for my JS files) and save it. Next find the file you created and click on it to open it.

In the file we will add a very simple javascript code to toggle CSS classes off and off. The code look like this:

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
} 

CSS File

Next we add some CSS so this will actually do what we want it to do.
You can create a new CSS file, or add it to one you already have. I have mine setup as a separate CSS so I can add it only when needed.

Again go to pages ->templates and click "New" at the bottom. This time, create a CSS file by selecting "Add CSS File". Again place it anywhere you want and hit save. Find it in your list and open it.

Then add the following classes into it:
 

 /* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
} 

Add HTML to the template

Now let us use this in our template.

We use Buttons to trigger the classes, and then we have a div that is toggled on or off to make the accordion work. The button need the classs "accordion" and the div that hold the content need the class "panel". That is it!

The code that we use looks like this:

<button class="accordion">Section 1</button>
<div class="panel">
  YOUR CONTENT GOES HERE
</div>

For multiple buttons to toggle on and off we add this multiple times:
 

<button class="accordion">Section 1</button>
<div class="panel">
  YOUR CONTENT GOES HERE
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  YOUR CONTENT GOES HERE
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  YOUR CONTENT GOES HERE
</div>

By adding some styling you can make the buttons look pretty much any way you want. This is an example of what one of my forms look like when styled:

View full record