mrhaha
Anime Night Host
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
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".
Download
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".
- <!
DOCTYPE html>
- <
html>
- <
head>
- <
title>
Show/
Hide Tutorial with Loader using JQuery</
title>
- </
head>
- <
body>
- <
h2>
Hide and Show Tutorial</
h2>
- <
div id=
"sample"
>
- <
h1>
HIDE ME!</
h1>
- </
div>
- <
button type=
"button"
id=
"hide"
>
Hide</
button>
<
button type=
"button"
id=
"show"
>
Show</
button><
br><
br>
- <
h2>
Loader with Time out</
h2>
- <
button type=
"button"
id=
"loader"
>
Show Loader</
button>
- <
div id =
"loader_here"
></
div>
- <
script src =
"jquery-3.1.1.js"
></
script>
- <
script type =
"text/javascript"
>
- $(
document)
.ready
(
function
(
)
{
- $(
document)
.on
(
'click'
,
'#hide'
,
function
(
)
{
- $(
'#sample'
)
.hide
(
)
;
- }
)
;
- $(
document)
.on
(
'click'
,
'#show'
,
function
(
)
{
- $(
'#sample'
)
.show
(
)
;
- }
)
;
- $(
document)
.on
(
'click'
,
'#loader'
,
function
(
)
{
- $(
'#sample'
)
.show
(
)
;
- var
loader =
$(
'<img src = "loader.gif" height="200px;" width="200px;"/>'
)
;
- loader.appendTo
(
$(
'#loader_here'
)
)
;
- setTimeout(
function
(
)
{
- loader.remove
(
)
;
- }
,
5000
)
;
- }
)
;
- }
)
;
- </
script>
- </
body>
- </
html>
Download
You must upgrade your account or reply in the thread to view hidden text.