How to fix animation of 2 blocks

The idea is that I should be able to click on text on right side, and it changes color and a block on the left side appears. I would like to know how to fix this animation and maybe make it simpler.

Here is my code:

function opacity() {
    document.getElementById("changing-h2-first").onclick(function () {
        setTimeout(function () {
            document.getElementById("opacity-first").className = "anim-opacity-enable";
        }, 200);
        document.getElementById("changing-h2-first").className = "anim-blue";
        if (document.getElementById("opacity-second").style.display === "flex") {
            document.getElementById("opacity-second").className = "anim-opacity-disable";
        } else if (document.getElementById("opacity-third").style.display === "flex") {
            document.getElementById("opacity-third").className = "anim-opacity-disable";
        }
    });
    document.getElementById("changing-h2-second").onclick(function () {
        setTimeout(function () {
            document.getElementById("opacity-second").className = "anim-opacity-enable";
        }, 200);
        document.getElementById("changing-h2-second").className = "anim-blue";
        if (document.getElementById("opacity-first").style.display === "flex") {
            document.getElementById("opacity-first").className = "anim-opacity-disable";
        } else if (document.getElementById("opacity-third").style.display === "flex") {
            document.getElementById("opacity-third").className = "anim-opacity-disable";
        }
    });
    document.getElementById("changing-h2-third").onclick(function () {
        setTimeout(function () {
            document.getElementById("opacity-third").className = "anim-opacity-enable";
        }, 200);
        document.getElementById("changing-h2-third").className = "anim-blue";
        if (document.getElementById("opacity-first").style.display === "flex") {
            document.getElementById("opacity-first").className = "anim-opacity-disable";
        } else if (document.getElementById("opacity-second").style.display === "flex") {
            document.getElementById("opacity-second").className = "anim-opacity-disable";
        }
    });
}

@keyframes opacity-disable {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        display: none;
    }
}

@keyframes opacity-enable {
    from {
        opacity: 0;
    }
    to {
        display: flex;
        opacity: 1;
    }
}

@keyframes black {
    from {
        color: #7a73ff;
    }
    to {
        color: #04101c;
    }
}

@keyframes blue {
    from {
        color: #04101c;
    }
    to {
        color: #7a73ff;
    }
}

.anim-opacity-enable {
    animation-name: opacity-enable;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.anim-opacity-disable {
    animation-name: opacity-disable;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.anim-black {
    animation-name: black;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.anim-blue {
    animation-name: blue;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

<div>
    <div style="display: flex; gap: 150px" id="opacity-first">
        <div>
            <h2>ORM</h2>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
        </div>
        <div>
            <p>SERM</p>
            <p>1</p>
            <p>1</p>
        </div>
    </div>
    <div style="display: none; gap: 150px" id="opacity-second">
        <div>
            <h2>ORM</h2>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
        </div>
        <div>
            <p>SERM</p>
            <p>1</p>
            <p>1</p>
        </div>
    </div>
    <div style="display: none; gap: 150px" id="opacity-third">
        <div>
            <h2>ORM</h2>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
        </div>
        <div>
            <p>SERM</p>
            <p>1</p>
            <p>1</p>
        </div>
    </div>
</div>
<div>
    <h2><a onclick="opacity()" id="changing-h2-first">SMM</a></h2>
    <h2><a onclick="opacity()" id="changing-h2-second">1</a></h2>
    <h2><a onclick="opacity()" id="changing-h2-third">1</a></h2>
</div>

I tried to change the JavaScript code to check for click like this, however it didn't work:

if (document.getElementById("id").onclick)

Solution

You are using onclick in HTML and then trying to attach another click event inside the opacity() function. This is redundant and can lead to errors. Choose one way to attach the click event. You can't animate the display property directly. Instead, you can toggle the display property in JavaScript after the animation is complete. You are directly setting className, which will overwrite all existing classes. Use classList.add and classList.remove to better manage the classes. The display property cannot be changed through CSS keyframes. You have to do it through JavaScript.

Instead, you should try like this :

<div id="content-wrapper">
    <div id="opacity-first"> ... </div>
    <div id="opacity-second"> ... </div>
    <div id="opacity-third"> ... </div>
</div>
<div id="links-wrapper">
    <h2><a id="changing-h2-first">SMM</a></h2>
    <h2><a id="changing-h2-second">1</a></h2>
    <h2><a id="changing-h2-third">1</a></h2>
</div>



document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("changing-h2-first").addEventListener("click", function() {
        toggleOpacity("opacity-first");
    });

    document.getElementById("changing-h2-second").addEventListener("click", function() {
        toggleOpacity("opacity-second");
    });

    document.getElementById("changing-h2-third").addEventListener("click", function() {
        toggleOpacity("opacity-third");
    });
});

function toggleOpacity(idToShow) {
    const ids = ["opacity-first", "opacity-second", "opacity-third"];
    ids.forEach(function(id) {
        const elem = document.getElementById(id);
        if (id === idToShow) {
            elem.classList.add("anim-opacity-enable");
            elem.classList.remove("anim-opacity-disable");
            elem.style.display = "flex";
        } else {
            elem.classList.add("anim-opacity-disable");
            elem.classList.remove("anim-opacity-enable");
            setTimeout(function() {
                elem.style.display = "none";
            }, 200);
        }
    });
}

//Update this css

.anim-opacity-enable, .anim-opacity-disable {
    animation-duration: 0.2s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.anim-opacity-enable {
    animation-name: opacity-enable;
}

.anim-opacity-disable {
    animation-name: opacity-disable;
}