> 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/.hide.md).

# .hide()

Typical syntax:

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

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

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

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

**Hide with delay**

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

### Hide with a callback function

```javascript
$("button").click(function(){
  $("p").hide(5000, function(){
    alert("The paragraph is now hidden - after waiting for 5sec");
  });
});
```

### Hide multiple elements

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

### Use cases

Use `.hide()` to:

* Dismiss a notification after the user reads it.
* Remove a loading indicator after content loads.
* Close an open panel after the user completes an action.

### More examples

Hide a notification when its dismiss button is clicked:

```javascript
$('.notification .dismiss').click(() => {
  $('.notification').hide(200);
});
```

Hide a loading indicator after results load:

```javascript
loadResults().then(() => {
  $('#loading').hide();
});
```

Hide a completed form after successful submission:

```javascript
$('#contact-form').hide(300, () => {
  $('#success-message').show();
});
```