How to Show and Hide Menu

Submitted by alpha_luna on Wednesday, July 27, 2016 - 13:23.
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.
  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>
  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.
Tags
show hide div
query show hide
hide
show

Add new comment

About text formats
  • 98 views