How do I implement accordion like functionality on my website? (Do not want to use Wix FAQ app)

Ask the community
,
1

I am trying to implement accordion kind of functionality where I can…

  1. Click on the header text of the box to expand and display additional content.
  2. The box expands smoothly with animated.
  3. When the box expands, I want the content below the box to move down with sliding animation.

As an example, you can refer to this link below…

https://support.wix.com/en/article/wix-editor-about-get-feedback

When you navigate to the page from the above link, please look out for the box as mentioned in the below image and click on it to refer to the functionality.

724×81 1.69 KB

Thank you,

Neo

2

Hi there …

The expansion animation is not currently supported.

The way to do it is to have an array of items like the one below, and assign it to a repeater - you need to add an _id property to each item first.

const items = [{ question: '....', answer: '...' }];

The layout of the repeater should include 2 text elements, one for the question and one for the answer, when clicking on the item container you should check whether the answer is hidden or not, and shwo or hide it accordingly.

$w('#repeater').onItemReady(($item, data) => {
    $item('#question').text = data.question;
    $item('#answer').text = data.answer;
    
    $item('container').onClick(() => {
        if ($item('#answer').collapsed) {
            $item('#answer').expand();
        } else {
            $item('#answer').collapse();
        }
    })
})

Hope this helps!~
Ahmad