Code has been added to clipboard!

Displaying Previously Hidden Elements With jQuery .show() Method

Reading time 1 min
Published Jan 16, 2018
Updated Oct 2, 2019

jQuery show: Main Tips

  • The jQuery .show() method makes the selected element visible.
  • It makes jQuery unhide what was hidden using .hide().

Displaying Hidden Elements

The jQuery .show() function turns the selected element visible. Usually, it is the same element that was previously hidden by using .hide().

In the example below, you can make jQuery show div element by clicking a button:

Example
$("button").click(() => {
    $("div").show();
});

You can use .show jQuery method without any parameters for a simple display function with no animation. However, you may also use additional parameters to animate it:

$("selector").show(length, easing, callback);

There are three parameters you may add for jQuery .show:

  • length represents the animation duration in milliseconds (400 by default). Keyword values may also be used: slow represents 600 ms, fast - 200 ms.
  • easing is defined by keywords: linear means consistent animation speed, and swing begins slow, then speeds up.
  • callback specifies a function to execute after the .show jQuery animation finishes.
Learn jQuery
Introduction
Selectors
Events
Event Methods
Download
Callback
Chaining
Get and Set
Add Element
Remove Element
Traverse
Parent
Children
Sibling Traverse
Filtering
jQuery AJAX
Effects
Show and Hide
Fade Effect
Slide Effect
Animate Effect
Manipulate CSS
Width and Height
.addClass()
.after()
.animate()
.append()
.appendTo()
.attr()
.before()
.bind() (deprecated)
.blur()
.change()
.click()
.clone()
.css()
.dblclick()
.delay()
.delegate() and .undelegate() (deprecated)
.detach()
.empty()
.end()
.error() (deprecated)
.fadeIn()
.fadeOut()
.fadeTo()
.fadeToggle()
.finish()
.focus()
.focusIn()
.focusOut()
.hasClass()
.height()
.hide()
.hover()
.html()
.innerHeight()
.innerWidth()
.insertAfter()
.insertBefore()
.keypress()
.keyup()
.live() and .die() (deprecated)
.load() (deprecated)
.mousedown()
.mouseenter()
.mouseleave()
.mousemove()
.mouseout()
.mouseover()
.mouseup()
.off()
.offset()
.offsetParent()
.on()
.one()
.outerHeight()
.outerWidth()
.position()
.prepend()
.prependTo()
.prop()
.proxy()
.queue()
.ready()
.remove()
.removeAttr()
.removeClass()
.removeProp()
.replaceAll()
.replaceWith()
.resize()
.scroll()
.scrollLeft()
.scrollTop()
.show()
.slideDown()
.slideToggle()
.slideUp()
.stop()
.submit()
.text()
.toggle()
.toggleClass()
.trigger()
.triggerHandler()
.unbind() (deprecated)
.unload() (deprecated)
.unwrap()
.val()
.width()
.wrap()
Event Properties
event.currentTarget
event.preventDefault()
event.relatedTarget
event.stopImmediatePropagation()
event.stopPropagation()
event.target
event.timeStamp
event.type
event.which
jQuery .find()
jQuery .keydown()
jQuery.noConflict()
pageY and pageX