Classic Accordion jump when opening

[mad_the_bad]

Hi there,

when I open the accordion on a recent project there is always a little jump while collapsing. It seems like the slide animation won’t finish in the last few percents of the accordion body.

Here is a page of the project where the issue can be seen: Project page

Thanks in advance!
Best, Mattis

[marc_a]

Hi Mattis,

Thanks for reaching out.

I just check the page you are referring to but the classic accordion is just working fine on my end. Would you mind provide us a screenshot or videos indicating the issue you are facing?

Hope that helps.

Thank you.

[mad_the_bad]

Hi Marc,

thanks for your reply. Attached you can find a video with the issue. Check the jump just before the end of the animation.

classic_accordion.mp4

[prakash_s]

Hello @mad_the_bad

It seems that it is working fine. It is the default nature of the accordion. When you click on the accordion item it would open the content then the content would take the height to open because of that it seems like content is jumping.

Thanks

[mad_the_bad]

Hello Prakash,

you seem to describe another issue thats discussed concerning the accordion. My issue is that the animation seems to be working fine until maybe the last 10% - then the content just popps out without any animation at the end. You can see it clearly in the video I sent when you focus on the bottom part of the expanded accordion.

Thanks

[marc_a]

Hi @mad_the_bad,

I just checked your website and able to see what you are trying to explain but this is really how the accordion works. Changing how nature works would require customization. Regretfully, customization is outside the scope of our theme support. You may seek 3rd party developers to help you with your problems or you can avail One where we can answer questions outside of the features of our theme.

Thank you.

[mad_the_bad]

Hi Marc,

I’m not sure if I understand you correctly. So the issue I addressed is normal for this element? I checked other projects where I used X with the Classic Accordion too and could not see the animation problem (e.g. https://ninepoint.global/ or https://mmsc-koeln.de/ ).

Does it have to do with the Version of X?

[ruenel]

Hello @mad_the_bad,

There is a difference in your accordion settings. In your other projects, the accordion items were not linked. Please edit your page and unlinked the items.

Disabling the “Linked Items” option will reduce the jumping motion of the page.

Hope this helps.

[mad_the_bad]

Hi @ruenel,

thanks for your reply! I tried that but unfortunately it didn’t have any impact on the animation.
Take a look here .

Any other idea?
Thanks in advance!

[kory]

Howdy, @mad_the_bad! Thanks for writing in and sorry about the issue you’re running into. I think there’s a few things going on here that might be contributing to this problem, so I’m going to give you a couple solutions to explore on this.

First, I do notice the slight “stutter” you’re referencing that seems to occur towards the last 10% of each Accordion Item. So to begin looking into this I went and tested a stock Classic Accordion on my local install, and everything appears to be functioning normally. I placed a few Accordion Items into my design with a decent amount of content that roughly matches how long your Accordion Items are, and I am not perceiving any similar issues locally.

So that leads me to the next possible issue happening here, which could be related to the customizations you seem to have applied to the Element itself. This should be perfectly fine, but it should be noted that sometimes altering the wrong bit of markup could potentially lead to a conflict in the script that calculates the height animation on the Accordion Items. As I began looking into this, I noticed that you have applied a margin-bottom to each .x-accordion-inner item in the markup:

Coincidentally, this also seems to be about the same length of the “stutter” that I’m noticing on your page. So my first recommendation to you would be to try moving this margin-bottom value from the .x-accordion-inner element to the .x-accordion-group element instead, as that is where we have some default margin used to space these items out. It could be that your placement of margin on that element is what’s causing this jump, so I’m just trying to get your customizations to match our default styling as much as possible.

If that does not work, I would next recommend that you potentially look into upgrading your content here to the v2 Accordion for several reasons:

1. The styling you are achieving through custom CSS should be completely doable natively within the tool using the v2 Accordion, eliminating the need for custom CSS.
2. The Classic Accordion runs on a legacy script for animating the transitions which is based off a very old version of Bootstrap as that is what we started using a long time ago on these Elements. However, our more recent Elements are all developed custom by us and feature more streamlined, efficient, and modern scripting to keep things as low-overhead as possible. It could be that the old script just has some finicky issues that are being exasperated by certain customizations. As the default stock Element works fine for me locally, this does seem to point towards a customization conflict, which we can’t really support as it moves beyond the stock usage of the Element, which is again why I would recommend going to the v2 Accordion as all this can be done natively.

Hopefully that helps to point you in the right direction and give you some options to explore…cheers!

[mad_the_bad]

Hi @kory,

thanks a lot for your reply! I tried the suggestion with my custom margin but it didn’t work either.
Long story short: I used the newer Accordion element and now. I was hoping to avoid this solution since I had to configure the new element and copy/paste a lot of text - but it works now which is pretty cool.

[matt]

That’s unfortunate, @mad_the_bad, but glad you you’ve got it working now.