Reveal or conceal elements with a touch of animation

Question

Reveal or conceal elements with a touch of animation

I am in the process of building my own website and I've been working on implementing a button that can toggle the visibility of a specific div element. While the functionality is there, I really want to incorporate an animation to enhance it.

I attempted to replace the "block" with fadeIn() and the "none" with fadeOut(), but unfortunately, that did not yield the desired results.

Does anyone have any suggestions or ideas on how I can achieve this?

function pcsh1() {
  var x = document.getElementById("pc1");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

<button onclick="pcsh1()">Show / Hide PC 1</button>
<div id="pc1">
  <textarea rows="2" cols="20" placeholder="PC Name" class="pcbox">PC Name: </textarea>
  <textarea rows="2" cols="20" placeholder="Alignment" class="pcbox">Alignment: </textarea>
  <textarea rows="2" cols="20" placeholder="Max HP" class="pcbox">Max HP: </textarea>
  <textarea rows="2" cols="20" placeholder="Current HP" class="pcbox">Current HP: </textarea>
</div>

Although the current output serves its purpose, implementing an animation would greatly improve the overall user experience.

javascript html css

Answer 1

Answer №1

If you want to add a smooth transition effect to an element on your website, you can achieve it by using the CSS transition property along with a little bit of JavaScript. By toggling a specific CSS class on the target element, you can control how it transitions from one state to another.

Discover more about CSS transition...

Transitions provide a way to animate changes in CSS properties...

Let's take a look at a code example:

var btn = document.getElementsByTagName('button')[0]
var p = document.getElementsByTagName('p')[0]

btn.addEventListener('click', evt => {
  p.classList.toggle('show')
})

.show {
  opacity: 1;
}

p {
  opacity: 0;
  transition: opacity 0.6s linear;
}

<button>Click Me</button>

<p>Hello</p>

For your specific case, here is how you can implement it:

var btn = document.getElementsByTagName('button')[0];
var pc1 = document.getElementById('pc1');

btn.addEventListener('click', function() {
  pc1.classList.toggle('hide');
});

#pc1 {
  opacity: 1;
  transition: opacity 0.5s linear;
}

#pc1.hide {
  opacity: 0;
}

<button>Show / Hide PC 1</button>
<div id="pc1">
  <textarea rows="2" cols="20" placeholder="PC Name" class="pcbox">PC Name: </textarea>
  <textarea rows="2" cols="20" placeholder="Alignment" class="pcbox">Alignment: </textarea>
  <textarea rows="2" cols="20" placeholder="Max HP" class="pcbox">Max HP: </textarea>
  <textarea rows="2" cols="20" placeholder="Current HP" class="pcbox">Current HP: </textarea>
</div>

Answer 2

If you want to add a smooth transition effect to an element on your website, you can achieve it by using the CSS transition property along with a little bit of JavaScript. By toggling a specific CSS class on the target element, you can control how it transitions from one state to another.

Discover more about CSS transition...

Transitions provide a way to animate changes in CSS properties...

Let's take a look at a code example:

var btn = document.getElementsByTagName('button')[0]
var p = document.getElementsByTagName('p')[0]

btn.addEventListener('click', evt => {
  p.classList.toggle('show')
})

.show {
  opacity: 1;
}

p {
  opacity: 0;
  transition: opacity 0.6s linear;
}

<button>Click Me</button>

<p>Hello</p>

For your specific case, here is how you can implement it:

var btn = document.getElementsByTagName('button')[0];
var pc1 = document.getElementById('pc1');

btn.addEventListener('click', function() {
  pc1.classList.toggle('hide');
});

#pc1 {
  opacity: 1;
  transition: opacity 0.5s linear;
}

#pc1.hide {
  opacity: 0;
}

<button>Show / Hide PC 1</button>
<div id="pc1">
  <textarea rows="2" cols="20" placeholder="PC Name" class="pcbox">PC Name: </textarea>
  <textarea rows="2" cols="20" placeholder="Alignment" class="pcbox">Alignment: </textarea>
  <textarea rows="2" cols="20" placeholder="Max HP" class="pcbox">Max HP: </textarea>
  <textarea rows="2" cols="20" placeholder="Current HP" class="pcbox">Current HP: </textarea>
</div>

Answer 3

Answer №2

Instead of using the display property to toggle hide/show, I recommend utilizing the opacity property for a smoother animation effect. Here's how you can achieve this:

function pcsh1() {
    var x = document.getElementById("pc1");
    if (x.classList.contains("hide")) {
      x.classList.remove("hide");
    } else {
      x.classList.add("hide");
    }
}

You can enhance the transition by adding the following CSS:

#pc1 {
  opacity: 1;
  transition: opacity 1s;
}
#pc1.hide {
  opacity: 0;
}

For a better visualization, check out this example on CodePen: https://codepen.io/mikeCky/pen/WWjLEq

Answer 4

Instead of using the display property to toggle hide/show, I recommend utilizing the opacity property for a smoother animation effect. Here's how you can achieve this:

function pcsh1() {
    var x = document.getElementById("pc1");
    if (x.classList.contains("hide")) {
      x.classList.remove("hide");
    } else {
      x.classList.add("hide");
    }
}

You can enhance the transition by adding the following CSS:

#pc1 {
  opacity: 1;
  transition: opacity 1s;
}
#pc1.hide {
  opacity: 0;
}

For a better visualization, check out this example on CodePen: https://codepen.io/mikeCky/pen/WWjLEq

Answer 5

Answer №3

To make an element visible or hidden, you can use the toggle class instead of setting display to block. You can hide the element by scaling it along the y-axis to 0. Here is a sample code snippet:

function toggleElement() {
  var element = document.getElementById("elementId");
  element.classList.toggle('is-visible');
}

Here is the corresponding CSS:

#elementId {
    transform: scaleY(0);
    transition: transform 400ms ease 0ms;
}

#elementId.is-visible {
    transform: scaleY(1);
    transition: transform 400ms ease 0ms;
}

Answer 6

To make an element visible or hidden, you can use the toggle class instead of setting display to block. You can hide the element by scaling it along the y-axis to 0. Here is a sample code snippet:

function toggleElement() {
  var element = document.getElementById("elementId");
  element.classList.toggle('is-visible');
}

Here is the corresponding CSS:

#elementId {
    transform: scaleY(0);
    transition: transform 400ms ease 0ms;
}

#elementId.is-visible {
    transform: scaleY(1);
    transition: transform 400ms ease 0ms;
}

Answer 7

Answer №4

fadeIn() and fadeOut() are popular JQuery functions, but it seems like you're not utilizing JQuery in the code provided. Here are some alternative options to achieve the desired effect:

JQuery Effects - Utilize fadeIn() and fadeOut() by incorporating JQuery into your project;
CSS Animations - Create animations using @Keyframes in CSS;
CSS Transitions - Considered the most suitable option for your scenario. Use the "transition" attribute in CSS to adjust the opacity of elements, specify animation duration, and set repetition preferences.

Answer 8

fadeIn() and fadeOut() are popular JQuery functions, but it seems like you're not utilizing JQuery in the code provided. Here are some alternative options to achieve the desired effect:

JQuery Effects - Utilize fadeIn() and fadeOut() by incorporating JQuery into your project;
CSS Animations - Create animations using @Keyframes in CSS;
CSS Transitions - Considered the most suitable option for your scenario. Use the "transition" attribute in CSS to adjust the opacity of elements, specify animation duration, and set repetition preferences.

Reveal or conceal elements with a touch of animation

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Button click functionality for updating in Classic ASP is functioning correctly exclusively in Internet Explorer and not in other web browsers

Adjust the size of each link in the highchart network diagram

"Create a set of arrays within an object that are duplicates four times, and then dynamically manipulate the first item within each array

Trigger the animation of a Div element when the cursor hovers over a different Div

Attempting to alter an image with a click and then revert it back to its original state

Arrange 4 divs (children) at each corner of the parent element

Ways to implement two functions within a single onclick event

Learning about extracting the route path variable in the node.js Express route.get() function

Creating a personalized .hasError condition in Angular 4

Waiting in Python using Selenium until a class becomes visible

When using jQuery to select elements of a specific class, make sure to exclude the element that triggered the

The Typescript compiler is throwing an error in a JavaScript file, stating that "type aliases can only be used in a .ts file."

Determining the length and angle of a shadow using X and Y coordinates

Having trouble with an echoing PHP code error?

Is it possible to achieve the same functionality as :first-child by employing :nth-of-type without a selector?

React - retrieving the previous page's path after clicking the browser's "back" button

There is a possibility of encountering an endless update loop in the watcher when utilizing the expression "tabs" error in vue

Implement a function that allows users to input a pin code digit by digit using a single HTML input

Reloading the Angular application returns it to its initial state

Angular 2: Enhancing Tables