Question 36117 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to reappear a div with a button? – Jquery

I have an issue with my project.

I have this code to make disappear my div :

@keyframes hideAnimation {
  to {
    visibility: hidden;
  }
}

On my div I do this animation to make disappear my div after 6 seconds

.env{
  animation: hideAnimation 0s ease-in 6s;
  animation-fill-mode: forwards;
}

My issue is : I want to create a button to reappear my div

The div disappear automatically after 6 seconds and the user can make reappear the div with a click on a button.

I don’t know how to do that.

I think I will use JS or jQuery but I’m lost.
Can someone can help me ?

Tags:

2

Answers


  1. 0

    So, you need the button on click to get the div you want to reappear, and set its visibility: visible;

    For example

    button.addEventListener('click', () => {
  document.querySelector('.env').style.visibility = 'visible';
})

    For more resources

    1. addEventListener
    2. querySelector
    3. HTMLElement style
    4. Visibility
    Login or Signup to reply.
  2. 0

    If your goal is to fade in/out the div then keyframes is overkill. You can use transition with opacity instead.

    const div = document.querySelector('div');

document.querySelector('button').addEventListener('click', e => {
  div.classList.toggle('show');
});
    div { 
  opacity: 0;
  transition: opacity 1s;
} 

div.show {
  opacity: 1;
} 
    <button>Toggle div</button>
<div>Lorem ipsum dolor sit</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search