Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
DD77

GSAP accordion expanding issue

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

Sounds similar to these other two topics you posted.

 

  • Like 3
Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

@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.

 

Link to comment
Share on other sites

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 :) 

Link to comment
Share on other sites

@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.)

 

 

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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

 

  • Like 2
Link to comment
Share on other sites

@PointC 

thanks, really helpful 

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

 

:)

  • Like 4
Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

Yes I changed it, accordion-menu 

Link to comment
Share on other sites

@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

Link to comment
Share on other sites

@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. 

  • Like 2
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×