Hide and show same element on click with javascript

Question

I am trying to get a bar to hide and then show again in one click. Do I need to put some kind of time out when re-adding the class?

var button = document.querySelector('.btn');

button.addEventListener('click', function() {

  document.querySelector('.bar').classList.remove('animateBar');
  document.querySelector('.bar').classList.add('animateBar');


});

* {
  padding: 0;
  margin: 0;
}

.wrap {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative
}

.bar {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;
  background-color: black;
  transform: translateY(100%);
  transition: transform 1s;
}

.animateBar {
  transform: translateY(0);
  transition: transform 1s;
}

.btn {
  position: relative;
  display: block;
  text-align: center;
  cursor: pointer;
}

<div class="wrap">

  <div class="bar animateBar"></div>

  <div class="btn">hide/show</div>

</div>

@Mason executing both lines simultaneously just overlays both animations i guess. maybe try to use setTimeout(() => {}, 1000) and wait with the second animation — Nicolas Gehlert, Apr 17 '18 at 13:57
I am playing around with a slideshow of images and when an image slides out I want this bar to slide down and when the next image has slid in i would like it to pop up again. I know to achieve this i would need some kind of timeout but just wasn't sure if i could just use a transition delay via css for the added class or if it would need to be done in the actual function. — , Apr 17 '18 at 13:58

Taki · Accepted Answer · 2018-04-17T14:02:19.397

use setTimeout() between removing and adding the class

var button = document.querySelector('.btn');

button.addEventListener('click', function() {

  document.querySelector('.bar').classList.remove('animateBar');
  setTimeout(function(){
    document.querySelector('.bar').classList.add('animateBar');
  }, 1000);
  


});

* {
  padding: 0;
  margin: 0;
}

.wrap {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative
}

.bar {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;
  background-color: black;
  transform: translateY(100%);
  transition: transform 1s;
}

.animateBar {
  transform: translateY(0);
  transition: transform 1s;
}

.btn {
  position: relative;
  display: block;
  text-align: center;
  cursor: pointer;
}

<div class="wrap">

  <div class="bar animateBar"></div>

  <div class="btn">hide/show</div>

</div>

this worked great thank you very much! I will just the timeout accordingly however i need it — , Apr 17 '18 at 14:14

score 0 · Answer 2 · answered Apr 17 '18 at 14:02

Yes you need to use setTimeout with a delay. Try the following.

var button = document.querySelector('.btn');

button.addEventListener('click', function() {

  document.querySelector('.bar').classList.remove('animateBar');      
  setTimeout(() => {
     document.querySelector('.bar').classList.add('animateBar');      
  }, 800);

});

* {
  padding: 0;
  margin: 0;
}

.wrap {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative
}

.bar {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;
  background-color: black;
  transform: translateY(100%);
  transition: transform 1s;
}

.animateBar {
  transform: translateY(0);
  transition: transform 1s;
}

.btn {
  position: relative;
  display: block;
  text-align: center;
  cursor: pointer;
}

<div class="wrap">

  <div class="bar animateBar"></div>

  <div class="btn">hide/show</div>

</div>

score 0 · Answer 3 · answered Apr 17 '18 at 14:05

0

var button = document.querySelector('.btn');

button.addEventListener('click', function() {

  document.querySelector('.bar').classList.remove('animateBar');
  setTimeout(() => {
      document.querySelector('.bar').classList.add('animateBar');
  }, 1000);


});

This should work

answered Apr 17 '18 at 14:05

Fabio Carpinato

1,121
6
13

this worked thank you very much – Apr 17 '18 at 14:15

Hide and show same element on click with javascript

3 Answers3