How to smoothly open and close toggle box

Ask the community
, ,
1

Question:
Hello. I’m trying to add a togglebox on my website, and I want to make the boxes open smoothly when the buttons are clicked, and collapse again when the buttons are clicked once again.

Here’s my code.


// Velo API Reference: https://www.wix.com/velo/reference/api-overview/introduction
$w.onReady(function () {
		$w('#button01').onClick ( () => {
			toggleBox($w('#Section01'));
	});

		$w('#button02').onClick ( () => {
			toggleBox($w('#Section02'));
	});

});

function toggleBox(boxElement) {
	const isCollapsed = boxElement.collapsed;
	let slideIn = {
  		"duration":   300,
  		"delay":      300
	}; 
	if (isCollapsed) {
		setTimeout(() => boxElement.expand());
		boxElement.show("slide");
	} else {
		boxElement.collapse();
	}
}

I tried to add effect on “show” and “hide” but it doesn’t work at all. Could anyone correct my code or show me the example?

Product:
Wix Website Editor
What have you already tried:
[Share resources, forum topics, articles, or tutorials you’ve already used to try and answer your question.]

Additional information:
I’ve checked here:

Also the velo API page on effect:

2

Try something like this:

async function toggleBox(boxElement) {
        const boxElement = $w('#box1')
        const isVisible = boxElement.isVisible;
        let effectOptions = {
            "duration": 300,
            "delay": 300
        };
        if (isVisible) {
            await boxElement.hide("slide", effectOptions);
            boxElement.collapse();
        } else {
            await boxElement.expand();
            boxElement.show("slide", effectOptions);
        }
}
  • Use isVisible which reports whether an element is visible at all.
  • await the hide and the expand. We’re awaiting the hide so the animation plays before the collapse happens (if they both executed at around the same time the collapse would happen before the hide animation completes). Also awaiting the expand for similar reasons but in reverse. We want the element expanded in its appropriate spot before the show effect starts or otherwise it might expand and be part way through its show animation before it’s completely ready.
  • Expand/collapse are only for making sure the element does/doesn’t take up space. Show/hide are for setting whether the element is shown or hidden.
  • Need to pass the slideIn variable to show/hide so that it would have an effect on the animation. I renamed it to effectOptions to clarify. You’re also free to only use it on the show call if you’d like.
1 Like
3

I got the idea. Thank you so much!!

1 Like