Texts glitches when opening accordion

Can you provide a link to the page for me to take a look at?

Hello,

Thanks for the awesome support!

The link: https://www.ruudrodermond.nl/tarieven/

Hmm. I’m not seeing any text glitches. I’ve tested it in Safari, Chrome and Firefox. Having a div in the accordion likely won’t cause any issues. It could just be a browser/computer specific issue. You machine might be having trouble rendering the animations fast enough so it’s dropping frames.

Got the latest macbook pro retina. So that won’t be the case :p

Maybe i explain it better:

When the accordion gets opened. At the last millisecond the text in the accordion moves like 10px up.

Maybe thats more clear?

I can’t seem to access the site anymore. But it might have to do with margins on the titles. jQuery does a terrible job of animating those attributes. If there are margins on the titles, try using padding instead. For example:

.accordion-title {
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}

Alright ill try that! thanks!

Changing certain margins to paddings doesn’t seem to work.

When i open the accordion the text seems to nudge 5/10px up. And when i close the accordion it seems to nudge up even more

Is it possible for me to get access to the site again?

Login with

user:pass
guest:guest

to bypass maintenance screen

There may be a better option.

Is there a way where i can disable the animation? This fixes the whole problem.

You still have margin-bottom: 8px; set on .accordion-title. If you change that to 0px and instead add padding-bottom: 8px; that should solve the issue.

There is no way to disable the animations.

unfortunately doesn’t fix it ??

It looks like you still have the margin on the bottom. See this image. When I remove it, and add padding bottom instead it works as expected.

Hello Phil,

Thanks again for the quick response. I first overlooked the 8px margin. It was on the accordion-title.

Although, when changing the margin to padding. It messes up the accordion creating huge gaps. between each accordion. Also the text still nudges up ??

You have margins set in a bunch of different places. The huge amount of space you’re seeing is from the other areas in the CSS where it is inheriting another margin-bottom value. Your styles are a little all over the place. I see references to .accordion-title on lines 1903 and 2732 of your style.css file. You’ll notice the various margins set around those areas. Also look for margin-bottom set on .accordion-title.open.

As a test, try adding this (temporarily) to the very bottom of your stylesheet:

.accordion-title {
    margin-bottom: 0 !important;
}

.accordion-title.open {
    margin-bottom: 0 !important;
}