CLA
web-services-logo

How to Create a Collapsible Accordion

Sometimes when there is a lot of content on a page, you might want to organize content in an accordion structure such as this where your visitors need to click on the topics to expand and read the content within them.

Question 1. Click to reveal the answer.

This is the answer to Question 1.

Question 2. Click to reveal the answer.

This is a longer answer for question 2. This answer is a multi-line paragraph, however it works similarly to the shorter answer in question 1.

In this tutorial you will learn how to add the code to style your text into this accordion format as well as giving it these functionalities above.

Overview

We will be using CSS and JavaScript to create this accordion. 

  • CSS (Cascading Style Sheet) is a language used to describe the stylings of web elements. In other words, we will be using CSS to style these accordion elements.
  • JavaScript is the programming language of the web, and is used to add logic and functionalities to web elements. 

Implementation

  1. Navigate to the Cascade site where you wish to implement the accordion.
  2. Click "Edit".
  3. Within the editor, click "Source Code".
    source-code
  4. At the beginning of the code, copy and paste this code snippet in. This is the CSS that will style the accordion.
    <style>
    .question {
        color: #bf5700;
        transition: 0.4s;
        margin-bottom: 0px;
    }
    .question:before {
        content: '\02795';
        font-size: 10px;
        float: left;
        margin-right: 5px;
        margin-top: 5px;
    }
    .question:hover {
        opacity: 0.7;
    }
    .active:before {
        content: "\2796";
    }
    .answer {
        margin-top: 5px;
        margin-bottom: 5px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
    }
    </style>
  5.  Your Source Code window should look like this.
    placed-css
  6. Next, copy and paste this code snippet at the end of the HTML file. This is the JavaScript that will give the accordion functionalities.
    <script>
    var questions = document.getElementsByClassName("question");
    var i = 0;
    while (i != questions.length) {
        console.log(i);
        questions[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var ans = this.nextElementSibling;
            if (ans.style.maxHeight) {
                ans.style.maxHeight = null;
            } else {
                ans.style.maxHeight = ans.scrollHeight + "px";
            }
        });
        i++
    }
    </script>
  7. Your pasted code should look something like this.
    placed-js
  8.  Lastly, you will need to add class names to elements you'd like to apply the accordion to. For the clickable elements that will trigger the expansion / collapse, the class name is question. For the elements that will be expanded / collapsed, the class name is answer. Locate those elements in your Source Code and add the class name using the syntax class="question" or class="answer". Below is an example.
    <p class="question">What is the answer? Click this question to reveal.</p>
    <p class="answer">This is the hidden answer to the question</p>
  9. Here is an example of how the class names can be applied to the elements.
    class-name-examples
  10. Save & Preview > Submit > Publish.