[How-To] Collapsible Section/Accordion FAQ 2023

Hello everyone!

I was struggling with this as well initially and read through an older thread trying to figure it out. The thread was pretty much dead, so I gave up and went my own way. Here is the code and instructions if anyone else needs it:

Here's a step-by-step guide:

1. Access Your Unbounce Page:

   • Log in to your Unbounce account and open the landing page where you want to add the accordion FAQ.

2. Insert a Custom HTML Widget:

   • In the Unbounce editor, drag a Custom HTML widget onto your page and area where you want the FAQ section.
   • Click on the widget to edit it.(It should pop open automatically)

3. Add the HTML and CSS for the Accordion:

   • You'll need to write some HTML and CSS to create the accordion effect. Here's a basic example:

HTML:
Replace the “Question 1” etc text with a question, and the “Answer 1” with the answer. Continue for more questions/answers.

<div class="accordion">
  <div class="accordion-item">
    <button id="accordion-button-1" aria-expanded="false"><span class="accordion-title">Question 1</span></button>
    <div class="accordion-content">
      <p>Answer 1</p>
    </div>
  </div>
  <div class="accordion-item">
    <button id="accordion-button-2" aria-expanded="false"><span class="accordion-title">Question 2</span></button>
    <div class="accordion-content">
      <p>Answer 2</p>
    </div>
  </div>
  <div class="accordion-item">
    <button id="accordion-button-3" aria-expanded="false"><span class="accordion-title">Question 3</span></button>
    <div class="accordion-content">
      <p>Answer 3</p>
    </div>
  </div>
</div>

CSS(And some basic CSS to style it):
 

<style>.accordion {
  /* Style for accordion container */
}
.accordion-item {
  /* Style for each item */
}
.accordion-content {
  display: none;
  /* Style for the content */
}
</style>

Add JavaScript for Interactivity:

<script>
document.querySelectorAll('.accordion button').forEach(button => {
  button.addEventListener('click', () => {
    const accordionContent = button.nextElementSibling;
    button.setAttribute('aria-expanded', button.getAttribute('aria-expanded') === 'false' ? 'true' : 'false');
    accordionContent.style.display = accordionContent.style.display === 'block' ? 'none' : 'block';
  });
});
</script>

For Javascript:
Ensure that the Javascript goes under the Javascript section. You must also include the <script></script> tags in Unbounce. “Before body end tag” is also fine for the script.

For Stylesheet:
CSS *must* include the <style></style> as well.