Code Queen
- Jul 15, 2020
- 2 min read

Custom FAQ by creating double collapse effect

Updated: Sep 14, 2020

Tutorial Video

The collapsing design is a great way to list different attorney cases, medical information on a physician's site, education notes, agenda's or plans. By creating your own custom FAQ on Wix you can control the design and get really creative by adding custom images, custom arrows and custom text to display your information on website and make it really unique.

Follow Along #1

Tutorial Site

https://codequeen.wixsite.com/double-collapse

Follow Along #2

Code used in Tutorial Video

If you are following along to the tutorial video, remember to add or delete code as needed. The example below assumes you are using the properties panel for each element that will use the onClick event from within the properties panel. Remember that a part of the code automatically appears in the page code after clicking on the onClick event within the properties panel. (Keep reading to view alternative code if you do not want to use the properties panel.)



export function globe1_click() {
 if ($w('#topicBox1').collapsed) {
        $w('#topicBox1').expand();
    } else {
        $w('#topicBox1').collapse();
    }
}

export function oneArrow1_click() {
 if ($w('#oneSub1').collapsed) {
        $w('#oneSub1').expand();
    } else {
        $w('#oneSub1').collapse();
    }
}

export function oneArrow2_click() {
 if ($w('#oneSub2').collapsed) {
        $w('#oneSub2').expand();
    } else {
        $w('#oneSub2').collapse();
    }
}

export function oneArrow3_click() {
 if ($w('#oneSub3').collapsed) {
        $w('#oneSub3').expand();
    } else {
        $w('#oneSub3').collapse();
    }
}

Follow Along #3

Alternative Code without Properties Panel

We have found that sometimes the events coded directly from properties panel tend to randomly and mysteriously stop working. Just know there is another way of coding the onClick events. To do so, you do not add anything on the Properties Panel. Instead you would simply enter some code within the onReady function of your site. We recreated the code for the elements used in the first example code.


$w.onReady(function () {

    $w("#globe1").onClick((event) => {
 if ($w('#topicBox1').collapsed) {
            $w('#topicBox1').expand();
        } else {
            $w('#topicBox1').collapse();
        }
    });

    $w("#oneArrow1").onClick((event) => {
 if ($w('#oneSub1').collapsed) {
            $w('#oneSub1').expand();
        } else {
            $w('#oneSub1').collapse();
        }
    });

    $w("#oneArrow2").onClick((event) => {
 if ($w('#oneSub2').collapsed) {
            $w('#oneSub2').expand();
        } else {
            $w('#oneSub2').collapse();
        }
    });

    $w("#oneArrow3").onClick((event) => {
 if ($w('#oneSub3').collapsed) {
            $w('#oneSub3').expand();
        } else {
            $w('#oneSub3').collapse();
        }
    });

});

Good to Know #1

Wix FAQ App

Most people do not know that Wix offers a native Wix FAQ app that requires zero coding. It is a simple single collapse element with the option to add or remove a Title and a native search bar. The reason most people do not know Wix has an FAQ app is because it is not located within the 'add an element' section of the editor. Instead, the Wix FAQ app is located within the Wix app marketplace.

Link to app: https://www.wix.com/app-market/wix-faq

You can install it as many times as needed, you can embed images, videos and hyperlink any text that you add.