Hide and show DOM elements

In jQuery, you can hide an element using the hide() function, and show an element using the show() function. The equivalent in JavaScript is style.display attribute.

Refer to the following code snippet to learn how to hide or show an element through jQuery and vanilla JavaScript:

// Hide or show an element using jQuery
$(".blog-post").hide();
$(".blog-post").show();

// Hide or show an element using vanilla JavaScript
document.querySelector(".blog-post").style.display = "none";
document.querySelector(".blog-post").style.display = "block";

FadeIn and FadeOut (for animation) with the replace method

For vanilla Javascript, CSS will cater for the transition of the animation

$(".blog-post").fadeIn();
$(".blog-post").fadeOut();

let el = document.querySelector('.blog-post');
el.classList.replace('show', 'hide');

CSS for the .show and .hide class:

.show {
  transition: opacity 400ms ease-in;
  opacity: 1;
}
.hide {
  transition: opacity 400ms ease-out;
  opacity: 0;
}