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

Ask the community
,
1

GOAL
I am trying to setup a FAQ page for my website.

WHAT AM I LOOKING FOR?
I am looking for following functionality with smooth animation.

When the user clicks on the Topic Header, I want the…

  1. Icon to rotate 90-degrees clockwise

  2. Box to expand and show the content

When the user clicks the Topic Header, I want the…

  1. Icon to rotate 90-degrees counter clockwise

  2. Box to collapse and hide the content

NOTE
I do not want to use Wix FAQ app.

EXPECTATION
I am looking for a functional velo code and also instructions on where to place it and how to use it.

I know it sounds a bit demanding… trust me… its not a demand. I am just tired of being unable to get this to work. I also know that beggers cannot be choosers but I have had enough with this Wix animation. I just cannot wrap my head around Velo animation API. So pointing me to Wix API won’t help me.

Thank you for your help in advance.

Please refer to the attached image.

828×1140 19 KB

2

This seems to simple to use Wix Animation, you could use just the .hide and .show functions.

3

This is the simplest form to do it.

$w.onReady(function () {
 
    $w("#button1").onClick(() => {
        showHide()
 })

    $w("#button2").onClick(() =>{
        showHide()
 })

 const showHide = () => {
 if ($w("#box1").hidden) {
            $w("#box1").show()
            $w("#button1").hide()
            $w("#button2").show()
 } 
 else {
            $w("#box1").hide()
            $w("#button2").hide()
            $w("#button1").show()
 }
 }
})

Show and Hide (editorx.io)

4

If you need animated, this is the code:

import wixAnimations from 'wix-animations'

$w.onReady(function () {

 let timeline = wixAnimations.timeline()

 const myButton = $w("#button1")

    timeline.add(myButton, {
 "rotate": 270,
 "duration": 300
 })

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

    $w("#button1").onClick(() => {
        showHide()
 })

 const showHide = () => {
 if ($w("#box1").hidden) {
            $w("#box1").show("slide", slideInOptions)
            timeline.play()
 } 
 else {
            $w("#box1").hide("slide", slideInOptions)
            timeline.reverse()
 }
 }
})

Just remember that for many containers like that, you will need a repeater.

5

Exactly what I wanted. :heart_eyes::fire:
Thank you very much Bruno!

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.

7

@yan2k77 to avoid content being overlapped, you need to use the collapse() and expand() methods and they are not animated, but they are more responsive.

8

@bwprado Gotcha! I realized that hence that is what I have implemented now. Thank you Bruno! Much appreciated once again.

9

I’m currently working on a similar task, but the code seems only work when there is only one box. How can I use it for multi boxes? I saw you’ve mentioned for many container I’ll need a repeater, but what exactly is it and how to make it work? thanks