Is there a way to smoothly fade out and remove a section after clicking on it in WordPress? I tried using the code below, which worked but doesn't seem to work for WordPress. I am using the Oceanwp theme, which allows me to easily add CSS and JavaScript code. However, if you have a better solution to achieve this effect, I would greatly appreciate it. You can see the exact effect I am trying to achieve on this website . After clicking on the letter A and then on any button (CORPORATE or INSTITUTION), the current section fades away smoothly.
document.querySelector('.list').addEventListener("click", function(e) {
if (e.target.localName === "section") {
//Add CSS hide and animate with fade out
var currentCSS = this.className;
this.className = currentCSS + 'hide';
var removeTarget = e.target.parentNode.parentNode;
setTimeout(function() {
removeTarget.parentNode.removeChild(removeTarget);
}, 1000);
};
});.hide {
opacity: 0;
}
.top {
transition: 1s linear all;
background-color: blue;
height: 100vh;
}
section {
background-color: green;
}<div class="top">
<section class="list">This is a section</section>
</div>