How to Create a Collapsible FAQ Accordion in Unbounce (With +/x Icon)
A well-designed FAQ section helps reduce buyer hesitation and improves conversions on your landing page. In this step-by-step guide, you’ll learn how to build a custom FAQ accordion in Unbounce using HTML, CSS, and jQuery.
This accordion:
– Hides all answers by default
– Expands and collapses with smooth animation
– Auto-closes other FAQs when one is opened
– Changes background color and icon on click
Want the Accordion Already Set Up for You?
Download the full Unbounce section – just import and go live.
Step 1: Add the FAQ HTML Block
Open the Unbounce Classic Builder and drag a Custom HTML widget onto your page. Paste the following HTML into it:
<!DOCTYPE html>
<div class="faq-accordion">
<div class="faq-item">
<div class="faq-question">What is your return policy?</div>
<div class="faq-answer">You can return products within 30 days of purchase. Contact support for help.</div>
</div>
<div class="faq-item">
<div class="faq-question">Do you offer international shipping?</div>
<div class="faq-answer">Yes, we ship worldwide! Shipping times may vary depending on location.</div>
</div>
<div class="faq-item">
<div class="faq-question">How can I contact support?</div>
<div class="faq-answer">Reach us anytime through our contact form or support email listed on the website.</div>
</div>
</div>
Step 2: Add the Accordion CSS Styling
Go to the Stylesheets section of your page (located in the bottom left panel of the Classic Builder), and paste the following CSS:
You can add or duplicate more `<div class="faq-item">` blocks to create additional FAQs.
<style>
.faq-accordion {
max-width: 800px;
margin: auto;
}
.faq-item {
border: 2px solid black;
background-color: #27262C;
margin-bottom: 10px;
position: relative;
padding: 20px;
cursor: pointer;
transition: background 0.3s ease;
}
.faq-question {
font-weight: bold;
color: white;
padding-right: 40px;
}
.faq-answer {
display: none;
margin-top: 10px;
color: white;
background-color: #27262C;
}
.faq-item::after {
content: "+";
position: absolute;
top: 22px;
right: 20px;
width: 24px;
height: 24px;
background: grey;
color: white;
text-align: center;
line-height: 24px;
font-size: 16px;
font-weight: bold;
border-radius: 50%;
transition: all 0.3s ease;
}
.faq-item.active::after {
content: "×";
background: orange;
}
</style>
How to Customize Styles
Want to personalize the look? Here’s what to change:
- To change the background color of the entire FAQ box:
edit`background-color`in the.faq-itemselector. - To change the background or text color of the answer box:
edit`background-color`and`color`in the`.faq-answer`selector. - To change the font family:
Add a line like
`font-family: 'Your Font Name', sans-serif;`to`.faq-question`and`.faq-answer`selectors.
Example: CSS
.faq-question {
font-family: 'Open Sans', sans-serif;
}
You can use any Google Font by loading it in the Stylesheets or using system fonts.
Step 3: Add the jQuery and FAQ Logic
In the JavaScript section, under “Before Body End Tag”, paste the following script:
<!-- jQuery (only if not already loaded) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('.faq-answer').hide();
$('.faq-item').click(function() {
var $this = $(this);
if ($this.hasClass('active')) {
$this.removeClass('active');
$this.find('.faq-answer').slideUp(300);
} else {
$('.faq-item.active').removeClass('active').find('.faq-answer').slideUp(300);
$this.addClass('active');
$this.find('.faq-answer').slideDown(300);
}
});
});
</script>
This ensures the accordion works properly, allowing only one answer to be visible at a time.
Optional: Add More FAQ Items
To add more FAQs, just duplicate the block inside the HTML:
<div class="faq-item">
<div class="faq-question">Your question here?</div>
<div class="faq-answer">Answer goes here...</div>
</div>
Final Notes
- Be sure to test on mobile and desktop to confirm responsiveness.
- The FAQ container has a
`max-width`of 800px and will center automatically. - You can customize background, icon, text size, font, and transitions in the CSS.
You now have a fully functional, styled, and user-friendly FAQ accordion in Unbounce!
If you’d like to allow multiple FAQs open at once or make one open by default, let us know and we can provide a quick tweak for it.
Want This Set Up For You?
If you’re not sure how to build an accordion in Unbounce – or you’d rather not deal with custom code – we can help.
At UnbounceHacks, we offer affordable, done-for-you setups for advanced Unbounce features like:
Custom accordions
Interactive elements
Animations
Dynamic behaviors
And more…
So you can stay focused on conversions – not code.
👉 Reach out here: https://unbouncehacks.com/feedback
