Hi @parkmyvan ,

Whilst you are able to alter the button styles (colour, border etc.) natively in the builder, there’s no simple way to change the button text. To achieve that, you’d need to use some custom code to your page. This is a little outside the scope of my ability, although I did find this webpage showing you how this could be achieved using some Javascript.

Sorry I couldn’t be of more help with this, but I hope the above link can assist you in achieving your goal.

Hey @dipankar27, thanks for posting! :) This script only works for 1 section per page, when trying to use it across multiple sections on the same page the same functionality is not always guaranteed. We cannot help you modify custom code, however, f you’d like to share your exact setup here with the community then with a bit of luck a community member with a little more coding knowledge than our support team can chime in and help you out! 🎉 I hope you have a great day ahead @dipankar27 and thank you for being an active member of the community! 

Hello everyone!

I was struggling with this as well initially and read through this entire thread trying to figure it out. 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.

Please note I am a complete noob, but this works perfectly.