Jquery 2020 adding simple project hide/show,fade,slide.
Published: 2020-09-12 06:41:20

---
title: Jquery 2020 adding simple project hide/show,fade,slide.
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

In this tutorial we will use [w3schools.com](https://www.w3schools.com/jquery/default.asp) for jquery hide/show,fade,slide.
Let's dive into it.

**This is our HTML structure**
for simplicity, we will use visual studio code.

```
<!doctype html>
<html lang="en">
  <head>
    <title>Jquery within 1 hour</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
      
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script>
        $(()=> {
            //
        })
    </script>
  </body>
</html>

```



**1. Jquery Selector**
Example of selector below
* $("p")
* $(".demo")
* $("#demo")
* $("[data-attr]")
* $("ul li")
*example*

```
 <button id="demo">Click Me</button>
    
    <ul class="nav justify-content-center">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled link</a>
        </li>
    </ul>

 <script>
        $(()=> {
            //
            $('#demo').click(()=> {
                $('[class*="nav justify-content"]').toggle()
            })
        })
    </script>
```

**2. Jquery Event**
for the jquery event, we will just remove our prefix "on" like click,dblclick,mouseleave,load,change instance of onclick,ondblclick,onmouseleave,onload,onchange.

*Example below*

```
$(()=> {
            $('button').click(()=> {
                alert("Hello Button")
            })
        })
```
click mean onclick at vanilla js.

**3. Jquery hide/show**

like we use the above button and we can use the same way to toggle the HTML

*example 1*
```
 $(()=> {
            $('button').click(()=> {
               $('ul').hide()
            })
        })
```
hide() add display: none css style

```
$(()=> {
            $('button').click(()=> {
               $('ul').show()
            })
        })
```
show() remove the display: none

another callback is toggle() it toggle the HTML to display: none;

```
$(()=> {
            $('button').click(()=> {
               $('ul').toggle()
            })
        })
```
Inside toggle,hide,show paranthesis we also can add transition effect like toggle(2000) mean 2 second. 
we can use different way to get the transition liek 
*toggle(2*2000) // 2s;
*toggle("slow") // slow
toggle("fast") // fast

**4. Jquery fade**
if you know jquery hide/show that's mean you know jquery fade effect. 
Jquery has the following fade method.
1. fadeIn()
2. fadeOut()
3. fadeToggle()
4. fadeTo()

*Example*
```
$(()=> {
            $('button').click(()=> {
               $('ul').fadeToggle("slow")
            })
        })
```

**4. Jquery Slide**
Jquery has the following slide method.
1. slideDown()
2. slideUp()
3. slideToggle()

so hide/toggle, fade, slide this 3 effect is the different but the same way we can use.
*example*

```
$(()=> {
            $('button').click(()=> {
               $('ul').slideToggle("slow")
            })
        })

```
This is our simple hide/show, fade, slide jquery tutorial. 
For simple landing page jquery is always good to use.
For large project there are several library reactjs,angularjs is good to use.
If you like this short tutorial please like, comment, and share for encouraging more posts.
Thanks.