Javascript

Showing or hiding content with jQuery animation

Showing or Hiding Content with jQuery Animation

jQuery makes it super easy to animate content visibility with built-in methods like .show(), .hide(), and .toggle() — all of which support smooth animation effects.

✅ What You’ll Learn

  • How to show, hide, or toggle content

  • How to animate the speed

  • Bonus: Use .slideDown(), .slideUp(), .fadeIn(), .fadeOut() for fancier effects

Basic HTML Example

html
<button id="toggleBtn">Show/Hide Info</button>

<div id="infoBox" style="display: none; margin-top: 20px;">
<p>This is some hidden content revealed with jQuery!</p>
</div>

<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Basic jQuery Toggle Animation

js
$('#toggleBtn').click(function () {
$('#infoBox').toggle(400); // 400ms animation
});

.toggle(speed) will show the element if it’s hidden, and hide it if it’s visible — with animation.

Other jQuery Animation Methods

Method Description
.show(speed) Animates showing the element
.hide(speed) Animates hiding the element
.toggle(speed) Toggles show/hide with animation
.slideDown() Slide down to show
.slideUp() Slide up to hide
.fadeIn() Fade in (good for smooth reveals)
.fadeOut() Fade out

Example: Slide Animation

js
$('#toggleBtn').click(function () {
$('#infoBox').slideToggle(500); // smoother slide animation
});

Example: Fade In/Out

js
$('#toggleBtn').click(function () {
$('#infoBox').fadeToggle(300); // fades in or out
});

Tip: Change Button Text Dynamically

js
$('#toggleBtn').click(function () {
$('#infoBox').slideToggle(400);
const btnText = $(this).text() === "Show Info" ? "Hide Info" : "Show Info";
$(this).text(btnText);
});

Summary

jQuery Method Use for…
.show() / .hide() Simple appear/disappear
.slideDown() / .slideUp() Slide effects
.fadeIn() / .fadeOut() Fade effects
.toggle() / .fadeToggle() / .slideToggle() Toggle with animation

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *