How to make the same code affect several items

Discussion Ask a question
,
1

Hi everyone
new to the forum so forgive me if I am not posting in the right place or if this subject has been talked about before.
i am trying to make a collapsable text. So far I’ve been successful, the problem is when my text is inside a container (so I can make my text readable cuz it’s on top of a picture) How do I make both the container and text box colapse at the same time? And how do I apply this to 11 more elements?

sorry for the lengthy post. Looking forward to all the hell I can get.
Ps- have no knowledge about coding… :man_facepalming:

2

If you have a text inside a container element and want to collapse them both you should move the text into the container and only collapse the container itself using the .collapse() method.

if you want you can make a function that will collapse or expand any given object like this

export function collapseExpandObject(elementObject) {
    if( elementObject.collapsed ) { 
      elementObject.expand(); 
    } 
    else { 
      elementObject.collapse(); 
    }
}

Use that function in your page like this

collapseExpandObject($w("#container1"));
// This will expand it if it is collapsed and the reverse
1 Like
3

Andreas
Thank you very much!
now i have another question, hope you dont mind and can help me.

i made this code work for what i wanted…
export function globe1_click() {
if ($w(‘#topicBox1’).collapsed) {
$w(‘#topicBox1’).expand();
}
else
$w(‘#topicBox1’).collapse();
}

Now i want to add an icon X at the bottom of the text or box so once you read whats inside you can click on that X to close and hide the box again.
Is that possible?

Thank you again, really appreciate your knowledge and help.

4

Hi Esteban,

Add a button and locate it inside the container box, next to your text. Afterwards, add an event handler that runs when the button is clicked.
( I suggest you to design your container’s frame to be invisible so its not going to be seen at your site).

Add the following code to your handler:

export function buttonX_click(event) {
 if ($w('#text1').collapsed) {
        $w('#text1').expand();

    } else
        $w('#text1').collapse();
}

Now, after clicking button X the text will collapse and clicking again will expend it beck.

Have a nice day and best of luck!
Sapir