Fade out and remove a section in WordPress

Question

How can I fade out then remove a section after clicking on it in WordPress ? This is the code that I used in brackets which worked , but doesn't work for WordPress.I use the theme Oceanwp , which allows me to add CSS and JavaScript code easily , but if you have a better idea on how to achieve this result , I would highly appreciate it. You can see exactly what I want to achieve with this website https://www.alphafx.co.uk/ after you click on the letter A 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>

my be [this](https://stackoverflow.com/questions/29017379/how-to-make-fadeout-effect-with-pure-javascript) gives you some idea — Paritosh Mahale, Oct 30 '18 at 10:48

score 0 · Answer 1 · answered Oct 30 '18 at 11:14

This may be what you need.

document.querySelector('.list').addEventListener("click", function(e) {
  //Add CSS hide and animate with fade out
  this.classList.add("hide");

  const removeTarget = e.target.parentNode;
  setTimeout(function() {
    removeTarget.parentNode.removeChild(removeTarget);
  }, 1000);
});

.hide {
  opacity: 0;
}

.top {
  background-color: blue;
  height: 100vh;
}

section {
  background-color: green;
  opacity: 1;
  transition: opacity 1s ease;
}

<div class="top">
  <section class="list">This is a section</section>
</div>

Your code works perfect , but for some reason not in WordPress =( — Alice Evans, Oct 31 '18 at 14:44

score 0 · Answer 2 · answered Oct 30 '18 at 11:18

0

Since you are using jquery, you can use 'fadeOut' function

$('.list').click(
  function(){
    $(this).fadeOut();
  }
);

answered Oct 30 '18 at 11:18

Majid Eltayeb

558
4
16

Fade out and remove a section in WordPress

2 Answers2