Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Mar 6

Expand/Collapse Text

Hi Editor X Community.


I am new to EX, and this is my first post so apologies in advance if this question has already been addressed. My scenario is this:


I am creating an FAQ page with questions and corresponding answers.


I want the answer to be hidden until the user clicks a symbol for example a '+' sign or a 'down arrow' symbol to reveal the answer then click the reveal symbol again to hide the answer or leave it revealed if that's what the user wants.


What functionality in EX can achieve this requirement?


Thank you.

Sunil

4 comments
Mar 6

You need to use Velo for this.

Basically need to create a container with a grid of 2 rows.

The first row will contain the button and the second row will contain the answer - its height should be max-content.

The element of the answer should be set to collapse on load so answer will be hidden and the row height will be zero.


Then you need to add a code that every time you click on the button it will expand to the answer.


Something like this:

$w.onReady(function () {
    answerExpanded = false;

    $w('#buton').onClick(() => {
        answerExpanded ? $w('#answer').collapse() : $w('#answer').expand()
        answerExpanded = !answerExpanded;
    });
    
});

Live example

Mar 7

Thank you Matanya.


Regarding the mention of Velo and the sample code snippet, can code be used in Editor X using the Dev mode?


Mar 10

@Matanya Thank you 🙂

Editor X

Design your boldest creations.