How to open and close the menu when clicking

 $('.menu-icon').click( function(){ if ( $('.s-menu').hasClass('show') ) { $('.s-menu').removeClass('show'); } else { $('.s-menu').removeClass('show'); $('.s-menu').addClass('hide'); } }); 

 *{ box-sizing: border-box; -moz-box-sizing: border-box; /*Firefox 1-3*/ -webkit-box-sizing: border-box; /* Safari */ } div{ box-sizing: border-box; -moz-box-sizing: border-box; /*Firefox 1-3*/ -webkit-box-sizing: border-box; /* Safari */ } body, html{ margin: 0; padding: 0; height: 100%; } a{ color: #000; text-decoration: none; } ul{ list-style-type: none; padding: 0; } .hide{ display: none; } .show{ display: block; } /*****Sidebar******/ .container{ min-height: 100%; overflow: hidden; float: left; position: fixed; } .sidebar h3{ font-family: 'Exo 2', sans-serif; color: #333; font-size: 24px; padding: 50px 30px 0 30px; margin: 0; } .sidebar h4{ font-family: 'Roboto', sans-serif; color: #3971ff; font-size: 16px; padding-left: 30px; font-weight: lighter; } .sidebar{ background-color: #f3f3f3; border-right: 1px solid #a7a7a7; } .s-menu{ padding-bottom: 9999px; margin-bottom: -9999px; } .s-menu li{ padding: 18px 0; padding-left: 25px; font-family: 'Exo 2', sans-serif; border-bottom: 1px solid #a7a7a7; width: 70%; margin: 0 auto; font-size: 16px; } .s-menu li:last-child{ border: 0; } .s-menu a{ color:#a7a7a7; transition: all 0.2s; } .left-line{ width: 14px; height: 2px; background-color: #3971ff; margin-left: -20px; margin-top: -10px; transition: all 0.2s; } .active .left-line{ width: 28px; transition: all 0.2s; } .menu-icon{ display: none; } .active a{ padding-left: 10px; transition: all 0.2s; color: #4c4c4c; } /******Sections*******/ .content{ max-width: 920px; margin: 0 auto; } /******Section Header*******/ .header { background-color: #EAEBED; height: 582px; } .content img{ margin: 125px; } .header-text{ margin-top: -450px; margin-left: 450px; } .header-text h3{ font-size: 30px; margin: 0; font-family: 'Exo 2',sans-serif; font-weight: lighter; color: #4c4c4c; } .header-text h1{ font-size: 48px; font-family: 'Exo 2',sans-serif; font-weight: lighter; color: #4c4c4c; margin: 0; } .header-text h1 span{ color: #3971ff; } .header-text h4{ color: #3971ff; font-family: 'Roboto',sans-serif; font-weight: lighter; font-size: 16px; border-top: 1px solid #232323; border-bottom: 1px solid #232323; display: inline-block; padding:10px 15px; } .header-text p{ padding: 0; margin: 0; font-family: 'Roboto',sans-serif; font-size: 16px; color: #4c4c4c; line-height: 28px; padding-bottom: 40px; } .header-text span{ color: #3971ff; } .header-select{ font-family: 'Roboto',sans-serif; color: #4c4c4c; margin-right: 86px; font-weight: bold; transition: all 0.2s; display: inline-block; } .header-select:hover{ color: #3971ff; transition: all 0.2s; } .down-line{ width: 50px; height: 2px; background-color: #3971ff; display: block; margin-top: 10px; transition: all 0.3s; position: absolute; } .header-select:hover .down-line{ width: 120px; transition: all 0.3s; } @media only screen and (max-width: 1200px) { .header-text h1{ font-size: 38px; } .header-text h3{ font-size: 22px; } .header-text h4{ font-size: 15px; padding:5px 10px; } .header-text p{ font-size: 15px; line-height: 23px; padding-bottom: 35px; } .content img { margin: 172px; max-width: 24%; } } @media only screen and (max-width: 991px) { .container{ min-height: 0; width: 100%; } .sidebar h3{ padding: 10px 0px 0px 20px; } .sidebar h4{ font-size: 15px; margin: 5px 0; padding-left: 20px; } .sidebar{ border: 0; } .s-menu { padding: 0; margin: 0; margin-top: -65px; line-height:70px; text-align: right; } .left-line{ width: 100%; height: 2px; background-color: #3971ff; margin-left: 0px; margin-top: -22px; transition: all 0.2s; } .s-menu li { border-bottom: 0; margin: 0 13px; padding: 0; width: auto; display: inline-block; font-size: 15px; } /******Sections******/ .sections{ padding-top: 71px; } .content img { max-width: 22%; margin: 116px 0 100px 60px; padding-top: 30px; } .header-text { margin-top: -300px; margin-left: 300px; padding: 0 20px; } .header-text h3 { font-size: 18px; } .header-text h1 { font-size: 30px; } .header-text h4 { font-size: 14px; padding: 4px 8px; } .header-text p { font-size: 14px; line-height: 20px; padding-bottom: 25px; } .header-select{ font-size: 15px; } } @media only screen and (max-width: 820px) { .content img { max-width: 25%; margin: 0 auto; display: block; } .header-text{ margin-top: 30px; margin-left: 0; text-align: center; padding: 20px 50px; } /*****Menu******/ .sidebar h4 { padding-bottom: 10px; } .s-menu { padding: 0; margin: 0; margin-top: 0; text-align: left; padding-left: 0; display: none; } .s-menu li { border-bottom: 0; margin: 20px 20px; padding: 0px; display: block; font-size: 15px; } .s-menu li:last-child{ padding-bottom: 15px; } .left-line { width: 25px; height: 2px; margin-left: 0px; margin-top: 12px; transition: all 0.2s; } .menu-icon{ display: block; position: absolute; right: 10px; top: 25px; cursor: pointer; } } @media only screen and (max-width: 480px) { .header-text{ padding: 10px 20px; } .header-select{ display: block; margin: 20px 0; text-align: center; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="sidebar"> <h3>AL-RAYHAN</h3> <h4>UI & UX Designer</h4> <img src="images/menu.png" alt="menu-icon" class="menu-icon"> <ul class="s-menu"> <li><a href="#">SKILLS</a> <div class="left-line"></div> </li> <li><a href="#">EDUCATION</a> <div class="left-line"></div> </li> <li><a href="#">EXPERIENCE</a> <div class="left-line"></div> </li> <li><a href="#">PORTFOLIO</a> <div class="left-line"></div> </li> <li><a href="#">BLOG</a> <div class="left-line"></div> </li> <li><a href="#">PRICING</a> <div class="left-line"></div> </li> <li><a href="#">CONTACT</a> <div class="left-line"></div> </li> </ul> </div> </div> <!-- Container-->