Div animation with Javascript after clicking on a link - how?

Question

I would like to animate a div after clicking on a link. When you click on "About", the should change its height. Height is set to '0em' in the CSS file. It works if I write "document.getElementById('about-div').style.height = '';", but it will jump suddenly, not animated. Now I tried this code but unfortunately, it doesn't want to work:

CSS:

.about-div {position:absolute;top:100vh;left:0em;width:100vw;height:0em;z-index:10000;background:white;overflow:hidden;}

.open {
  -webkit-animation: open 1s ease-in 1 forwards;
  animation: open 1s ease-in 1 forwards;
}

.is-paused {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

@keyframes open {
  0%   {height:0em;}
  1%     {height:'';}
  100% {height:'';}
}

@-webkit-keyframes open {
  0%   {height:0em;}
  1%     {height:'';}
  100% {height:'';}
}

@keyframes close {
  0%   {height:'';}
  100% {height:0em;}
}

@-webkit-keyframes close {
  0%   {height:'';}
  100% {height:0em;}
}

HTML:

<a href="javascript:openAbout()">About</a>

<div class="about-div open is-paused">
   <p>Some Content</p>
</div>

...and the Javascript code:

function openAbout()  {
  <script>
    document.querySelector('.about-div').classList.remove('is-paused');
  </script>
}

Any idea about it?

Answer 1

Please see my fiddle.

You should remove the script tags from inside your JS function. All parts of your JS should be inside the script tags like below.

<script>
function openAbout() {
    document.querySelector('.about-div').classList.remove('is-paused');
}
</script>

Also, I think using animation to animate the height is a bit cumbersome, so I used transition instead. Please see demo below (I removed the bottom positioning for easier viewing, you can put it back when you use it).

function openAbout() {
    document.querySelector('.about-div').classList.remove('is-paused');
}

body { background: #ddd; }
.about-div {
    position:absolute;
    left:0em;
    width:100vw;
    z-index:10000;
    background:white;
    overflow:hidden;
    transition: max-height 5s;
}
.open {
    max-height: 999px;
}
.is-paused {
    max-height: 0px;
}

<a href="#" onclick="openAbout()">About</a>

<div class="about-div open is-paused">
    <p>Some Content</p>
</div>

Answer 2

At first:

'href' isn't intended for calling functions. Most HTML elements have an 'onclick' tag for doing that.

<a href="#" onclick="openAbout()">About</a>

And you need to remove the '' tags like mentioned so your code looks like:

function openAbout() {
    document.querySelector('.about div').classList.remove('is-paused');
}

Answer 3

The function needs to be in script tags, not script tags inside the function.

<script>
function openAbout()  {
    document.querySelector('.about-div').classList.remove('is-paused');
}
</script>