DEV Community

loading...

Jquery 2020 adding simple project hide/show,fade,slide.

Nikhil Chandra Roy
Front-End Web Developer with JavaScript, ReactJs and Backend Python(Django)
・2 min read

In this tutorial we will use w3schools.com 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>

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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")
            })
        })
Enter fullscreen mode Exit fullscreen mode

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()
            })
        })
Enter fullscreen mode Exit fullscreen mode

hide() add display: none css style

$(()=> {
            $('button').click(()=> {
               $('ul').show()
            })
        })
Enter fullscreen mode Exit fullscreen mode

show() remove the display: none

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

$(()=> {
            $('button').click(()=> {
               $('ul').toggle()
            })
        })
Enter fullscreen mode Exit fullscreen mode

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")
            })
        })
Enter fullscreen mode Exit fullscreen mode

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")
            })
        })

Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

Forem Open with the Forem app