Expand/Collapse Text

Discussion Ask a question
1

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

3 Likes
2

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

1 Like
3

Thank you Matanya.

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

4

@sunilkalia Yes.
Here is a tutorial playlist that explains everything about Velo:
https://youtube.com/playlist?list=PL0y_aclKYoYhzHA9TbgEhzU68bvRI15mI

1 Like
5

@md60th Thank you :slightly_smiling_face:

6

Hey! I’m having trouble to make the row zero height. How can I do this? thanks in advance

7

@md60th Heya, thank you so much for the code help!
I saw your live example and am still unclear on how you get one half of a container grid to be collapsed without it collapsing the other half of the grid.

Also your example has the preceding item boxes move down when a box expands.
How have you achieved this?

your example has info on the arrow animations but im more interested in how the boxes work