Dynamic Repeater Accordion FAQ

Ask the community
1

I have I repeater (#FAQrepeater) on dynamic pages that gets its content from another connected data set’s (FAQs) fields depending on the dynamic page’s URL. The dynamic content is being pulled correctly but I’m trying to get the repeater to act as accordion drop down links in which clicking on a question displays the question’s answer below it.

Because of the design, each repeater item’s container consists of two containers, one with the question (question), and a second container below the first container with the answer (#answer).

Here’s the code I’m using to create the accordion effect. This code works when I use the same on a static page with static questions but not on the dynamic pages using connected data.

$w.onReady(function () {
    $w('#FAQrepeater').forEachItem( ($item, itemData, index) => {

        $item('#question').onClick( () => {

            if ($item('#answer').collapsed)

                $item('#answer').expand();

            else

                $item('#answer').collapse();

        })

    } )

} );

For some reason, when I’m in the editor and the dynamic page I’m viewing in the editor has actual FAQ content in the answer containers, even though the answer container element is collapsed by default, the container element isn’t shading to show it’s collapsed. However when you go to preview mode, the same answer container’s are actually collapsed but hovering and clicking the question container does not show the link pointer cursor and doesn’t change the corresponding answer container element to expanded. This is true regardless of if the answer text is unconnected placeholder text or connected data. Here are screenshots for clarity:

3002×1686 571 KB

2970×1710 729 KB

If you go to another page in the editor that doesn’t have dynamic FAQ content yet entered for it, the same answer container is shaded showing it’s collapsed. Here’s a screenshot showing the difference (unshaded vs shaded (#answer) container elements) depending on if the dynamic page you’re viewing in the editor has connected data like the one above vs. when the dynamic page you’re viewing in the editor has empty connected data):

3104×1974 1.07 MB

If I deselect collapsed by default for the answer containers then the answers will display below each question container so I’m assuming that even though collapsing the element by default does not shade the container, doing so is still collapsing it. It seems like there’s an issue with having a repeater display connected data in a container that’s collapsed by default. Here’s what happens when you deselect collapsed by default:

3104×1974 712 KB

If anyone could help me to figure out what’s going on or what I might be doing wrong, I’d really appreciate it.