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.

1. <a
   
   href
   
   =
   
   "#"
   
   class
   
   =
   
   "showAll"
   
   ><b
   
   style
   
   =
   
   "color:black; padding:20px;"
   
   >
   
   Show All</
   
   b
   
   ></
   
   a
   
   >
   
2. <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.

1. $(
   
   '.hideAll'
   
   )
   
   .click
   
   (
   
   function
   
   (
   
   )
   
   {
   
2. $(
   
   ".hideAll"
   
   )
   
   .hide
   
   (
   
   )
   
   ;
   
3. $(
   
   "li"
   
   )
   
   .last
   
   (
   
   )
   
   .hide
   
   (
   
   "slow"
   
   ,
   
   function
   
   fnCollapse(
   
   )
   
   {
   
4. $(
   
   this
   
   )
   
   .prev
   
   (
   
   "li"
   
   )
   
   .hide
   
   (
   
   "slow"
   
   ,
   
   fnCollapse)
   
   ;
   
5. if
   
   (
   
   !
   
   $(
   
   this
   
   )
   
   .prev
   
   (
   
   "li"
   
   )
   
   .length
   
   )
   
6. $(
   
   ".showAll"
   
   )
   
   .show
   
   (
   
   )
   
   ;
   
7. }
   
   )
   
   ;
   
8. }
   
   )
   
   ;
   
9. }
   
   )
   
   ;
   

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.

1. $(
   
   document)
   
   .ready
   
   (
   
   function
   
   (
   
   )
   
   {
   
2. $(
   
   ".showAll"
   
   )
   
   .hide
   
   (
   
   )
   
   ;
   
3. $(
   
   '.showAll'
   
   )
   
   .click
   
   (
   
   function
   
   (
   
   )
   
   {
   
4. $(
   
   ".showAll"
   
   )
   
   .hide
   
   (
   
   )
   
   ;
   
5. $(
   
   "li"
   
   )
   
   .first
   
   (
   
   )
   
   .show
   
   (
   
   'slow'
   
   ,
   
   function
   
   fnExpand(
   
   )
   
   {
   
6. $(
   
   this
   
   )
   
   .next
   
   (
   
   "li"
   
   )
   
   .show
   
   (
   
   "slow"
   
   ,
   
   fnExpand)
   
   ;
   
7. if
   
   (
   
   !
   
   $(
   
   this
   
   )
   
   .next
   
   (
   
   "li"
   
   )
   
   .length
   
   )
   
8. $(
   
   ".hideAll"
   
   )
   
   .show
   
   (
   
   )
   
   ;
   
9. }
   
   )
   
   ;
   
10. }
    
    )
    
    ;
    

And, this is the HTML source code and the CSS style.

1. <center
   
   >
   
2. <table
   
   width
   
   =
   
   "500px"
   
   cellpadding
   
   =
   
   "10"
   
   cellspacing
   
   =
   
   "10"
   
   border
   
   =
   
   "0"
   
   class
   
   =
   
   "tblShowHide"
   
   >
   
3. <tr
   
   >
   
4. <td
   
   valign
   
   =
   
   "top"
   
   >
   
5. <div
   
   >
   
6. <span
   
   style
   
   =
   
   "color:red;"
   
   >
   
   Sourcecodester Menu</
   
   span
   
   >
   
7. <a
   
   href
   
   =
   
   "#"
   
   class
   
   =
   
   "showAll"
   
   ><b
   
   style
   
   =
   
   "color:black; padding:20px;"
   
   >
   
   Show All</
   
   b
   
   ></
   
   a
   
   >
   
8. <a
   
   href
   
   =
   
   "#"
   
   class
   
   =
   
   "hideAll"
   
   ><b
   
   style
   
   =
   
   "color:black; padding:20px;"
   
   >
   
   Hide All</
   
   b
   
   ></
   
   a
   
   >
   
9. </
   
   div
   
   >
   
10. <ul
    
    >
    
11. <li
    
    >
    
    PHP</
    
    li
    
    >
    
12. <li
    
    >
    
    JavaScript</
    
    li
    
    >
    
13. <li
    
    >
    
    HTML / CSS</
    
    li
    
    >
    
14. <li
    
    >
    
    SQL</
    
    li
    
    >
    
15. <li
    
    >
    
    Visual Basic .NET</
    
    li
    
    >
    
16. <li
    
    >
    
    C#</
    
    li
    
    >
    
17. <li
    
    >
    
    Microsoft Access</
    
    li
    
    >
    
18. </
    
    ul
    
    >
    
19. </
    
    td
    
    >
    
20. </
    
    tr
    
    >
    
21. </
    
    table
    
    >
    
22. </
    
    center
    
    >
    

1. li {
   
2. padding
   
   :
   
   10px
   
   ;
   
3. color
   
   :
   
   blue
   
   ;
   
4. list-style
   
   :
   
   none
   
   ;
   
5. border
   
   :
   
   #FFFFFF
   
   2px
   
   solid
   
   ;
   
6. background-color
   
   :
   
   bisque
   
   ;
   
7. width
   
   :
   
   170px
   
   ;
   
8. }
   
9. a {
   
10. font-size
    
    :
    
    18px
    
    ;
    
11. color
    
    :
    
    #FFFFFF
    
    ;
    
12. text-decoration
    
    :
    
    none
    
    ;
    
13. background-color
    
    :
    
    skyblue
    
    ;
    
14. border
    
    :
    
    red
    
    1px
    
    solid
    
    ;
    
15. }
    
16. span {
    
17. font-size
    
    :
    
    30px
    
    ;
    
18. font-family
    
    :
    
    helvitica;
    
19. margin-left
    
    :
    
    -36px
    
    ;
    
20. }
    

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