How to change multiple different texts by button click?

I have three Cards, showing a certain monthly prizing with different prizes in each of the three cards. Clicking on a button reveals the annually prices. So I need to toggle. I did this with add and remove element. The Problem is: When clicking the toggle button, the formerly not visible text appears but under the formerly visible text (Because that is the position in the DOM). This causes a kind of “jump”.
I’ve no idea, how I can remove the element with the monthly prive from it’s position in DOM and replace it with the annual price without making the text jump. And vice versa.
I’ve prepared a Codepen for more clarity.

I’ve prepared a codepen for more clarity

Hi @sh11, actually this is just because the 2nd element has an additional margin due to this CSS rule:

article p + p {
    margin: 2em 0;

To avoid the jumping you might exclude your toggle content from that rule like so:

article p + p:not(.toggle-content) {
    margin: 2em 0;

Thank you so much. I completely did not see the CSS part of it. Cheers, Sven

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.