[Accordion Toggle on click, reverse animation]

Thank you for the nice welcome, and thanks for the help...

The article was full of nice inspiration and resources 😊 Definitely a more clean and nice approach than mine! 

 

Just another info, what if instead of this, i would like to add a full timeline to manage more animation based on the click? 

togg.anim = gsap.to(icon_plus, {
    rotate: 45,
    duration: 1,
    ease: "elastic.inOut(1, 0.5)",
    paused: true
  });

 

Why togg.anim? 

And i just noticed, the animation just trigger once if i click multiple times on the same accordion! It's caused by the i index number??

 

Thanks again,

Petar

[Accordion Toggle on click, reverse animation]

Hello guys, i need some help for a "simple" script that's driving me crazy... 

I've put an example on my code  on codepen: 

https://codepen.io/SaverioGarzi/pen/wvMLYMJ

 

The example is simulating the final results, but the code is messy, i would like to have a Timeline, instead of a simple tween, i have to add more feature with the click... The timeline should be play when i click on the accordion head, and reversing when i click again on the same accordion... But  it shoud also reverse when i click on another accordion... I can't figure out the logic.

This is what i'm using now:

var togg = document.getElementsByClassName("service-card");
    var i;
    
    for (i = 0; i < togg.length; i++) {
        togg[i].addEventListener("click", function() {
            $('.service-card').not(this).removeClass('service-active');
            var $this = $(this),
                icon_plus = document.querySelectorAll('#services-plus'),
                actual_icon_plus =  $this.find('svg#services-plus');

                gsap
                    .to(icon_plus, {
                        rotate:0,
                        duration:1,
                        ease: "elastic.inOut(1, 0.5)"
                    });
            this.classList.toggle("service-active");

            if($(this).hasClass("service-active")){
                gsap
                    .to(actual_icon_plus, {
                    rotate:45,
                    duration:1,
                    ease: "elastic.inOut(1, 0.5)"
                });
            } else {

            }
        });
    }

i've searched in the forum, and i found this snippet, 

tl.reversed() ? tl.play() : tl.reverse();

but i was not able to implement it... 

 

Can someone give me a hand with that? 

Thanks

 

Petar 

 

 

 

 

 

 

See the Pen wvMLYMJ by SaverioGarzi (@SaverioGarzi) on CodePen