Hussain007
Profit Scaling Expert
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
In this tutorial, we are going to create on How To Show and Hide Menu. We all know that one of the most used frameworks is jQuery. Let us use this to have this tutorial.
Using jQuery it will simplify our source code by using its function.
In this article, we have two links to control the show and hide the menu of Sourcecodester one by one. Here's the source code.
By clicking the link, this script will be executed to hide all the menu bottom to top. This is for the hide all link. And this is the source code.
Likewise, repeat the instruction above for showing the menu from top to bottom. This is for the show all link. And this is the source code.
And, this is the HTML source code and the CSS style.
If you are interested in programming, we have an example of programs that may help you even just in small ways.
Share us your thoughts and comments below. Thank you so much for dropping by and reading this blog post. For more updates, don’t hesitate and feel free to visit our website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.
Download
Using jQuery it will simplify our source code by using its function.
In this article, we have two links to control the show and hide the menu of Sourcecodester one by one. Here's the source code.
- <a
href
=
"#"
class
=
"showAll"
><b
style
=
"color:black; padding:20px;"
>
Show All</
b
></
a
>
- <a
href
=
"#"
class
=
"hideAll"
><b
style
=
"color:black; padding:20px;"
>
Hide All</
b
></
a
>
By clicking the link, this script will be executed to hide all the menu bottom to top. This is for the hide all link. And this is the source code.
- $(
'.hideAll'
)
.click
(
function
(
)
{
- $(
".hideAll"
)
.hide
(
)
;
- $(
"li"
)
.last
(
)
.hide
(
"slow"
,
function
fnCollapse(
)
{
- $(
this
)
.prev
(
"li"
)
.hide
(
"slow"
,
fnCollapse)
;
- if
(
!
$(
this
)
.prev
(
"li"
)
.length
)
- $(
".showAll"
)
.show
(
)
;
- }
)
;
- }
)
;
- }
)
;
Likewise, repeat the instruction above for showing the menu from top to bottom. This is for the show all link. And this is the source code.
- $(
document)
.ready
(
function
(
)
{
- $(
".showAll"
)
.hide
(
)
;
- $(
'.showAll'
)
.click
(
function
(
)
{
- $(
".showAll"
)
.hide
(
)
;
- $(
"li"
)
.first
(
)
.show
(
'slow'
,
function
fnExpand(
)
{
- $(
this
)
.next
(
"li"
)
.show
(
"slow"
,
fnExpand)
;
- if
(
!
$(
this
)
.next
(
"li"
)
.length
)
- $(
".hideAll"
)
.show
(
)
;
- }
)
;
- }
)
;
And, this is the HTML source code and the CSS style.
- <center
>
- <table
width
=
"500px"
cellpadding
=
"10"
cellspacing
=
"10"
border
=
"0"
class
=
"tblShowHide"
>
- <tr
>
- <td
valign
=
"top"
>
- <div
>
- <span
style
=
"color:red;"
>
Sourcecodester Menu</
span
>
- <a
href
=
"#"
class
=
"showAll"
><b
style
=
"color:black; padding:20px;"
>
Show All</
b
></
a
>
- <a
href
=
"#"
class
=
"hideAll"
><b
style
=
"color:black; padding:20px;"
>
Hide All</
b
></
a
>
- </
div
>
- <ul
>
- <li
>
PHP</
li
>
- <li
>
JavaScript</
li
>
- <li
>
HTML / CSS</
li
>
- <li
>
SQL</
li
>
- <li
>
Visual Basic .NET</
li
>
- <li
>
C#</
li
>
- <li
>
Microsoft Access</
li
>
- </
ul
>
- </
td
>
- </
tr
>
- </
table
>
- </
center
>
- li {
- padding
:
10px
;
- color
:
blue
;
- list-style
:
none
;
- border
:
#FFFFFF
2px
solid
;
- background-color
:
bisque
;
- width
:
170px
;
- }
- a {
- font-size
:
18px
;
- color
:
#FFFFFF
;
- text-decoration
:
none
;
- background-color
:
skyblue
;
- border
:
red
1px
solid
;
- }
- span {
- font-size
:
30px
;
- font-family
:
helvitica;
- margin-left
:
-36px
;
- }
If you are interested in programming, we have an example of programs that may help you even just in small ways.
Share us your thoughts and comments below. Thank you so much for dropping by and reading this blog post. For more updates, don’t hesitate and feel free to visit our website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.
Download
You must upgrade your account or reply in the thread to view hidden text.