GSAP accordion expanding issue

[DD77 12 Likes (Newbie)]

Hi All, 
I'd like to add a class to accordion-group so I can make the height to 100%.
Currently I have 4 accordion groups that have a height: calc( 100% / 4), like this they get the height of the page. Unfortunately I can get the click even to add the extended class.  className: '+=expanded' 

Not entirely sure is the best approach. Would be lovely do get some directions.
 

See the Pen rEojde by davide77 (@davide77) on CodePen

[ZachSaucier 7,152 Likes (Superhero)]

Hey DD77. 

 

What effect are you trying to achieve? You've got a lot going on in your code so it's hard for me to tell. 

[DD77 12 Likes (Newbie)]

@ZachSaucier
Hi Zach,

I'm trying to add a class to the div accordion-group
then, with that class I should be able to make the height 100%.

Does't this makes sense? 

 

I polished up the code.

[PointC 14,429 Likes (Superhero)]

Sounds similar to these other two topics you posted.

 

[ZachSaucier 7,152 Likes (Superhero)]

Yep! I had to change your CSS to make the expanded class have height:100% but besides that I got ya.

 

All it takes is just TweenLite.to(content, 1, {className: "+=expanded"}); but this isn't the recommended way because animating between classes is intensive (under the hood GSAP has to check for differences in every property in order to know which ones to animate).

 

We recommend telling GSAP explicitly what you want to animate between instead. Both examples in the demo below:

 

See the Pen KOKRBX?editors=0010 by GreenSock (@GreenSock) on CodePen

[DD77 12 Likes (Newbie)]

@ZachSaucier
no really, the content when expanded should be 100% height, which should push the other content offset. 
Not sure how to achieve it. I was thinking that adding the class to the pared would do it.

 

[ZachSaucier 7,152 Likes (Superhero)]

So you want the clicked on accordion-group to take up 100% of the viewport's height? Does it need to be at the top of the page? Are the others still shown?

 

Please be more clear so we can help you get what you're desiring without guessing too much  

[DD77 12 Likes (Newbie)]

@ZachSaucier

 

Yes, correct. Sorry I'm trying my best to explain. 

the 4 group are divided by 4, height:100% / 4

On click, the selected one, takes out the height of the viewport. ( and potentially goes to the top.)

 

 

[ZachSaucier 7,152 Likes (Superhero)]

Sounds a bit more complex. I would suggest you look into flexbox and try animating them yourself. Blake, another user on these forums, created this helpful demo to show how you can animate flex elements. 

 

Why don't you try putting together another demo that animates it using flexbox and trying to keep it simple like the demo I provided above?

 

See the Pen dMLQJr by osublake (@osublake) on CodePen

[DD77 12 Likes (Newbie)]

@ZachSaucier
Thanks, I'll look in to that, but What I needed since the beginning was to add a class to accordion-group. 
I think that with a class to the parent I could achieve it with css.

[DD77 12 Likes (Newbie)]

@ZachSaucier
Pease have a look at this, I'm quite close, only thing is now adding the extended class to all of them. It should add the class only to the clicked one

See the Pen rEojde?editors=1010 by davide77 (@davide77) on CodePen

 

 

[PointC 14,429 Likes (Superhero)]

It's also helpful to use the forum search feature as there have been numerous accordion threads. Here are a couple.

If that search doesn't get you what you need, you can always fire up the Google machine and search: site:greensock.com accordion

 

[DD77 12 Likes (Newbie)]

@PointC 

thanks, really helpful 

[ZachSaucier 7,152 Likes (Superhero)]

My very first demo shows you how to add a class using GSAP. 

[DD77 12 Likes (Newbie)]

@ZachSaucier
and thanks for that, but you not targeting the .accordion-group, also the toggle doesn't work, it should close the other

 

Have a look at this please

See the Pen RXwYrO?editors=0010 by davide77 (@davide77) on CodePen

[ZachSaucier 7,152 Likes (Superhero)]

Right, but you can just change the target. You could also select the other sibling elements from there if you need to.

[DD77 12 Likes (Newbie)]

I'm actually using a code from  Blake! which is perfect. Unfortunately I keep getting error: Uncaught Cannot tween a null target.
 I'm trying, I've also tried your code. :-( 

See the Pen qeBJxO?editors=1010 by davide77 (@davide77) on CodePen

[Jonathan 5,392 Likes (Superhero)]

You get that error since .head does not exist in the DOM, and outputs null.

 

var menu = element.querySelector(".head"); // does not exist and outputs null

 

Check your HTML markup and make sure all the elements your targeting with GSAP exist in the DOM (HTML/SVG) before you try and animate them.

 

[DD77 12 Likes (Newbie)]

@Jonathan
trust me I checked, but I did some copy and paste to mate demos.

See the Pen qeBJxO?editors=1010 by davide77 (@davide77) on CodePen

even with the right class. Can't figure it out!! 

[Jonathan 5,392 Likes (Superhero)]

Just now, DD77 said:

trust me I checked

 

You say you checked, but there is no element in the codepen HTML panel with a class  of head, so that is why you get that error.

 

It does not exist!

[DD77 12 Likes (Newbie)]

Yes I changed it, accordion-menu 

[DD77 12 Likes (Newbie)]

@Jonathan

I managed to achieve what I need it.  I'm still have to some one important part of this task.

Basically, on click, the clicked element should move to the top, so like this the user could always scroll down to click the others.

         

onComplete: function() { 
	if ($(element).length){
		$("#menu").prepend($(element))
	} 
}

this code moves the element to the top. 

Now I need a tell the others to re-order the height and the top position. Could anyone help me please? 
 

See the Pen aevWYQ by davide77 (@davide77) on CodePen

[ZachSaucier 7,152 Likes (Superhero)]

@DD77 That's not a trivial task. I'd recommend changing your approach completely if that's what you need to do. I'd recommend that you position all of your elements absolutely and position them using JS if you need to do that. It would make animating them properly a lot more easy. As is you'll have a lot of trouble adjusting your current setup to have that behavior. 

[DD77 12 Likes (Newbie)]

@ZachSaucier I think i could achieve it with my setup.  
would you be able to help?  

 

[mikel 4,775 Likes (Superhero)]

Hi @DD77,

 

If an expert confirms that your code is very complex, you might want to try a simpler version.

 

Just for fun ...

 

See the Pen voLQPg by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel