> For the complete documentation index, see [llms.txt](https://jscula.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jscula.gitbook.io/docs/manipulation/.show.md).

# .show()

*Typical syntax:*

```javascript
 $(selector).show(delay,callback);
```

*<mark style="background-color:yellow;">**Parameters are optional:**</mark>*

* `delay` - the amout of time in milliseconds to wait before showing the hidden element
* `callback` - A callback function is executed after the current effect is finished.

```javascript
$("#mydiv").show();  //this will show the selected hidden element
```

**Show with delay**

{% code overflow="wrap" %}

```javascript
$("#mydiv").show(3000);  //this will wait for 3 secs before showing the hidden the element
```

{% endcode %}

### Show with a callback function

```javascript
$("button").click(function(){
  $("p").show(5000, function(){
    alert("The hidden paragraph is now showing");
  });
});
```

### Hide multiple elements

```javascript
$("ul li*").show(); //this will show all the hidden list items in the ul
```

### Use cases

Use `.show()` to:

* Reveal validation messages after a form check.
* Display an empty state when a search has no results.
* Open content that starts hidden, such as a help panel.

### More examples

Show a validation message when an email address is missing:

```javascript
if (!$('#email').hasValue()) {
  $('#email-error').show();
}
```

Show an empty state after a search:

```javascript
if (results.length === 0) {
  $('#empty-results').show(200);
}
```

Reveal a help panel after a user action:

```javascript
$('#help-button').click(() => {
  $('#help-panel').show(300);
});
```