What is the process for displaying a hidden div using a button?

I'm running into a problem with my project.

Here is the code I've been using to hide my div element :

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

To trigger the animation and hide the div after 6 seconds, I have implemented the following:

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

However, now I am facing an issue where I need to create a button to make the div reappear.

The div automatically disappears after 6 seconds, but I want to give users the ability to bring it back by clicking a button.

I'm not sure how to achieve this. I believe JavaScript or jQuery might be the way to go, but I feel overwhelmed.

If anyone could provide assistance, I would greatly appreciate it.

javascripthtmljquerycss

Answer №1

If you want to create a smooth fade in/out effect for the div, using keyframes may be unnecessary. Instead, consider utilizing transition with opacity.

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

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

div.show {
  opacity: 1;
} 
<button>Toggle div</button>
<div>Lorem ipsum dolor sit amet</div>

Answer №2

To make a specific div reappear when a button is clicked, you can use the following code to set its visibility to visible:

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

If you need more information and resources on this topic, check out the following links:

  1. addEventListener
  2. querySelector
  3. HTMLElement style
  4. Visibility

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to calculate checksum and convert it to a 64-bit value using Javascript for handling extremely large files to avoid RAM overflow?

Question: What is the best method for generating a unique and consistent checksum across all browsers? Additionally, how can a SHA256/MD5 checksum string be converted to 64-bit? How can files be read without requiring excessive amounts of RAM when ...

javascriptalgorithmtypescriptchecksumsha256

Unable to switch. Is there an issue with the initialization of Bootstrap 5 JavaScript?

I seem to be encountering an issue with my implementation of Bootstrap 5.0.0-beta2. While I can expand my navbars and accordions successfully, collapsing them does not work as expected. It appears that the problem lies in the initialization of the JavaScr ...

javascriptruby-on-railstwitter-bootstrapwebpackerbootstrap-5

Node.js user update complete

I am currently working on enabling users to edit their profiles. However, the code I have set up does not seem to be functioning as expected. The form I am using looks like this: <form action="/dashboard/users/edit/:id" method="put"> And my route ...

javascriptnode.jsexpress

How can I make multiple elements change color when hovering with CSS?

Hey there! I have a little design challenge that I need help with. On my website (), I am trying to make multiple elements of a specific item change color when the user hovers over the text. If you hover over the "more" menu item, you'll notice that o ...

javascriptjqueryhtmlcsshover

A step-by-step guide on leveraging ajax for submitting comments in WordPress

I am currently working on developing a custom WordPress theme that includes a unique contact form. This contact form is designed to store data in a custom post type called "Messages" whenever a user submits the form. Below is the code snippet for the cont ...

phpjqueryajaxwordpresscomments

Leverage the power of the modal component in your ReactJS

I'm facing an issue with the antd library. Even after installing it from the official site and importing the modal component, it's not functioning properly for me. I've carefully checked everything in my code and everything seems to be fine. ...

javascripthtmlreactjsreact-hooksfrontend

Is there a way to customize the ::selection style using mui createTheme?

I'm looking to globally change the color and background color of ::selection in my app. Can anyone advise on how to achieve this using createTheme()? ...

javascriptcssreactjsmaterial-ui

Rewrite: "Rewriting URL POST requests in Node.js

Within my JavaScript file, I have this function: exports.authentication = function(req, res) { // .. // user validation // .. res.redirect('/login'); }; I'm looking to modify all POST requests to a different path, such as / ...

javascriptnode.jsurlurl-rewriting

Is there a way to use lodash to convert an array into an object?

Below is an array that I am working with: const arr = [ 'type=A', 'day=45' ]; const trans = { 'type': 'A', 'day': 45 } I would appreciate it if you could suggest the simplest and most efficient method to ...

javascriptlodash

What is the best way to fix multiple dropdown menus opening simultaneously in Vue.js?

I am working on an application that generates todo lists for tasks. These lists can be edited and deleted. I am trying to implement a dropdown menu in each list to provide options for updating or deleting the list individually. However, when I click on the ...

javascriptvue.js

Navigate to the element and retrieve a null offset

Currently, I am attempting to retrieve an element's ID from a select box and then scroll to that specific element using the following code snippet: // move to services $(function () { $("select.jump").change(function() { var selected = $( ...

jqueryhtml

Endless loop JSON vulnerability

I recently came across a discussion on Stack Overflow about Google's practice of prepending while(1); to their JSON responses. Can anyone provide guidance on what type of PHP script would be suitable for this situation? I attempted the following: $ ...

javascriptphpajaxjson

Using the Greasemonkey browser extension, one can employ the waitForKeyElements utility to trigger a function once a designated element becomes visible on the webpage

(In connection to the question I posted on Stack Overflow). I have been developing a userscript for metal-archives.com, which can be found here. When you navigate to a band page (like this example), you will see the DISCOGRAPHY section and its sub-tabs ...

javascriptjquerygreasemonkey

Problem Encountered with Navigation Bar following the Cloning and File Transfer in a React (Next) Project

I cloned the repository and transferred the files using these commands: 1. git clone https://github.com/adrianhajdin/portfolio.git 2. cd portfolio 3. mv * .. Upon executing npm run dev, everything appears fine, but upon clicking on the About button or ...

javascriptnext.jstailwind-cssframer-motion

Displaying the current time and total time of a custom video player using Javascript

Currently, I'm in the process of creating an html5 video player and have incorporated javascript to update the current time as a fraction of the total time. The script I've written so far is as follows: function updateTime() { var curTime = ...

javascriptcsshtmlvideo

Stopping a file transfer in case of browser closure or upload cancellation

When working on uploading a file asynchronously using HTML5 in MVC3, a common issue arises when dealing with large files such as 1GB. If the upload process is cancelled or the browser is closed at 50% completion, a 500MB file still gets saved in the target ...

c#javascriptasp.net-mvc-3htmlfile-upload

Error: Attempting to modify a constant variable

Can anyone assist me in resolving this error? I have included my index.js, routes.js, and db.js code along with the error description. I've been putting in a lot of effort to troubleshoot this error. index.js const express = require('express&a ...

javascriptmysqlnode.jsdatabaseexpress

What could be the reason for the onmessage listener not handling the initial SSE event?

When a client connects to a Node Express server, it creates a new EventSource. The server sends an SSE event upon initial connection and then at a 30-second interval thereafter. Strangely, the client's onmessage handler does not respond to the initial ...

javascriptnode.jsexpressnginxserver-sent-events

Unable to create selected buttons in Vue.js

I'm having trouble creating buttons that can select all options when clicking on either size or color. The buttons aren't showing up at all. Can someone help me identify the issue? I've attempted various solutions but none seem to work. Any ...

javascriptvue.jsbutton

What steps can I take to stop jQuery's $.getJSON function from converting my AJAX response keys into integers?

I am facing an issue where JQuery is changing the type of keys in a JSON response object from text to integer when populating a select box. This causes the response object to be reordered based on the numeric indexes, disrupting the order of the select box ...

javascriptjqueryajaxarrays