Seeking help with smooth animation using Javascript (preferred) / JQuery (less preferred)

Ask the community
,
6

Hi Bruno,

Apologies for bothering you again. Could you please help me a bit further?

How do I achieve accordion-like FAQs using your code?

Please review the attached the screenshot for your reference.

If you notice, When Content 1 is displayed with animation, it overlaps Topic Header 2 . The Topic Header 2 and the remaining content doesn’t gets pushed further down.

You will also notice the use of show()/hide() functions.

With show()/hide() functions the content below doesn’t get pushed further below, it overlaps :persevere:

If I use expand()/collapse() functions then the remaining content below gets pushed further down, but I cannot get them to animate. :confused:

My question is… how do I use animations with expand()/collapse() functions?

Here is the code I have used.

let timeline = wixAnimations.timeline();

let myButton = $w("#button1"); //myButton is the green arrow vector

timeline.add(myButton, {
	"rotate": 90,
	"duration": 200
})

let slideInOptions = {
	"duration": 200,
	"delay": 0,
	"direction": "top"
}

export function text1_click(event) { //text1 is the Topic Header 1 textbox
	toggleDisplay();
}

export function toggleDisplay() {
	if ($w("#box1").hidden) { //box1 is the Content 1 container
		$w("#box1").show("slide", slideInOptions);
		timeline.play();
 } else {
	$w("#box1").hide("slide", slideInOptions)
	timeline.reverse();
}}

How do I get it to work the way I expect?

Please help.