How to Show/Hide Div Tag and Set Time out using JQuery

[mrhaha]

In this tutorial, I'm going to show you how to show/hide an area in the page without reloading the whole page using JQuery. I've also included in this tutorial a sample loader and a time out for the loader. Be sure to download the included sample gif and sample jquery.

Creating our Page

We create our page that includes our jquery. To create the page, open your HTML editor and paste the code below. We name this as our "index.php".

1. <!
   
   DOCTYPE html>
   
2. <
   
   html>
   
3. <
   
   head>
   
4. <
   
   title>
   
   Show/
   
   Hide Tutorial with Loader using JQuery</
   
   title>
   
5. </
   
   head>
   
6. <
   
   body>
   
7. <
   
   h2>
   
   Hide and Show Tutorial</
   
   h2>
   
8. <
   
   div id=
   
   "sample"
   
   >
   
9. <
   
   h1>
   
   HIDE ME!</
   
   h1>
   
10. </
    
    div>
    
11. <
    
    button type=
    
    "button"
    
    id=
    
    "hide"
    
    >
    
    Hide</
    
    button>
    
    <
    
    button type=
    
    "button"
    
    id=
    
    "show"
    
    >
    
    Show</
    
    button><
    
    br><
    
    br>
    
12. <
    
    h2>
    
    Loader with Time out</
    
    h2>
    
13. <
    
    button type=
    
    "button"
    
    id=
    
    "loader"
    
    >
    
    Show Loader</
    
    button>
    
14. <
    
    div id =
    
    "loader_here"
    
    ></
    
    div>
    
15. <
    
    script src =
    
    "jquery-3.1.1.js"
    
    ></
    
    script>
    
16. <
    
    script type =
    
    "text/javascript"
    
    >
    
17. $(
    
    document)
    
    .ready
    
    (
    
    function
    
    (
    
    )
    
    {
    
18. 
    
19. $(
    
    document)
    
    .on
    
    (
    
    'click'
    
    ,
    
    '#hide'
    
    ,
    
    function
    
    (
    
    )
    
    {
    
20. $(
    
    '#sample'
    
    )
    
    .hide
    
    (
    
    )
    
    ;
    
21. }
    
    )
    
    ;
    
22. 
    
23. $(
    
    document)
    
    .on
    
    (
    
    'click'
    
    ,
    
    '#show'
    
    ,
    
    function
    
    (
    
    )
    
    {
    
24. $(
    
    '#sample'
    
    )
    
    .show
    
    (
    
    )
    
    ;
    
25. }
    
    )
    
    ;
    
26. 
    
27. $(
    
    document)
    
    .on
    
    (
    
    'click'
    
    ,
    
    '#loader'
    
    ,
    
    function
    
    (
    
    )
    
    {
    
28. $(
    
    '#sample'
    
    )
    
    .show
    
    (
    
    )
    
    ;
    
29. var
    
    loader =
    
    $(
    
    '<img src = "loader.gif" height="200px;" width="200px;"/>'
    
    )
    
    ;
    
30. loader.appendTo
    
    (
    
    $(
    
    '#loader_here'
    
    )
    
    )
    
    ;
    
31. setTimeout(
    
    function
    
    (
    
    )
    
    {
    
32. loader.remove
    
    (
    
    )
    
    ;
    
33. }
    
    ,
    
    5000
    
    )
    
    ;
    
34. }
    
    )
    
    ;
    
35. }
    
    )
    
    ;
    
36. </
    
    script>
    
37. </
    
    body>
    
38. </
    
    html>
    

Download