How to make an FAQ section (made from WIX app) collapsible and not each question's answer

Ask the community
, , ,
1

I have created an FAQ section for a service page (using WIX FAQ from the app store) but it looks rather large on the page. Rather than seeing all the questions and opening the answer to each, I’d like it say ‘Read our Frequently Asked Questions’, with an arrow to click that opens the section to read or just show the first two or three questions and then ‘see more’.

I’m sure there is a simple solution but I haven’t found it yet! This is the page:

3

To make your FAQ section more user-friendly, start by adding a text element saying “Read our Frequently Asked Questions” with a button labeled “See More.” Initially, display only the first two or three questions. Link the button to show the rest of the FAQ section when clicked. Use the collapsible text or Velo (Wix Code) to hide and reveal the FAQ content, ensuring a clean and organized look on your service page.

4

Hi Remini_Download,

I used the collapsible text element but it doesn’t offer the text styling I want with the bolder larger font for questions and then the unbolded text for the answers.

Is there any chance you can share Velo Wix Code to hide with me and I’ll try using that and see if it helps. I’m actually using the Wix FAQ app. Do you know if I use the Velo code to make a collapsible element if I would need to chance the content to just be a text box?

Thanks

5

I would suggest trying the following, a very simple, perhaps “childish” and not professional solution, but still a solution:

  1. Divide frequently asked questions into 2 Wix FAQ elements;
  2. Add a button “Any questions left?” (any name);
  3. Connect these 3 elements into a stack:
  1. Questions and answers;
  2. Button;
  3. Questions and answers.

Questions and answers, those that come after the button, set the value to “collapse” when loading the page.

Add an onClick event to the button, which will “show the FAQ element.” when you click on the button and “collapse the button itself”.

And for the section in which this stack is located, set the height setting (max-content).

$w.onReady(function () {
    // Make sure the FAQ item is initially collapsed
    $w("#faqElement").hide();

    // Add an onClick event for the button
    $w("#showFaqButton").onClick(() => {
        // Show FAQ item
        $w("#faqElement").expand();
        
        // Collapse (hide) the button itself
        $w("#showFaqButton").collapse();
    });
});