Question

[How-To] Collapsible Section/Accordion FAQ 2023

  • 17 November 2023
  • 5 replies
  • 1124 views

Userlevel 1
Badge

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.


5 replies

Badge

Hi there!

Thank you for the script!

 

I managed to create a FAQ with a different code.

Do you know how to design a section that dynamically adapts to the expanded size of the FAQ?

In its original state,  everything looks fine. But with all questions expanded, it gets cut off by the following section.

Userlevel 1
Badge

Hi there!

Thank you for the script!

 

I managed to create a FAQ with a different code.

Do you know how to design a section that dynamically adapts to the expanded size of the FAQ?

In its original state,  everything looks fine. But with all questions expanded, it gets cut off by the following section.

Hello Lienhardt84! 

Unfortunately I do not. That was something I noticed with the code, but since it was only 3 questions for us, I did not spend more time on it. I will try and take a look later if I have time.

Userlevel 3
Badge

Hey @Devam thank you for sharing this! 💪 Awesome work and I’m happy to hear that you got your section working. I’m sure this will help other Unbouncers, so thank you again! 🙏 

Hi, good afternoon everyone,

Does this topic have any updates? I am also facing the same issue. When expanded, the text overlaps the following section!

Does anyone have a solution for this case?

Userlevel 4
Badge +1

@Mprote With Unbounce's classic builder, we can’t make the section dynamic. I think Unbounce should update this feature in the builder. Otherwise, it’s a very tricky task.

Reply