jQuery panel slider opens with button click but won't close

Question

I have a button on my page which opens a right panel by using jquery and modernizr frameworks. Button is placed on the rightmost place of screen. When it is clicked it slides to the left with the panel which it opens. The problem is, it won't slide back to where it was when it is clicked again.

HTML:

<!-- right panel -->
<div class="cd-panel from-right">
<header class="cd-panel-header">
    <h1>Views</h1>
    <a href="#0" class="cd-panel-close">Close</a>
</header>
<div class="cd-panel-container">
    <a href="#0" class="cd-btn">Views</a>
    <div class="cd-panel-content" ng-controller="ViewtreeCtrl">
        <div>
            Panel elements
        </div>
    </div>
    <!-- cd-panel-content -->
</div>
<!-- cd-panel-container -->

Javascript:

jQuery(document).ready(function($){
    //open the lateral panel
    $('.cd-btn').on('click', function(event){
        event.preventDefault();
        $('.cd-panel').addClass('is-visible');
    });
    //clode the lateral panel
    $('.cd-panel').on('click', function(event){
        if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) { 
            $('.cd-panel').removeClass('is-visible');
            event.preventDefault();
        }
    });
});

JsFiddle demo (You can see the CSS on JSFiddle)

Answer 1

Try this i used toggleClass (View in full screen mode to see the result)

 jQuery(document).ready(function ($) { //open the lateral panel $('.cd-btn').on('click', function (event) { event.preventDefault(); $('.cd-panel').toggleClass('is-visible'); }); //clode the lateral panel }); 

 .cd-panel-close { position: absolute; top: 0; right: 0; height: 100%; width: 60px; /* image replacement */ display: inline-block; overflow: hidden; text-indent: 100%; white-space: nowrap; } .cd-panel-close::before, .cd-panel-close::after { /* close icon created in CSS */ position: absolute; top: 22px; left: 20px; height: 3px; width: 20px; background-color: #424f5c; /* this fixes a bug where pseudo elements are slighty off position */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .cd-panel-close::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .cd-panel-close::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .no-touch .cd-panel-close:hover { background-color: #424f5c; } .no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after { background-color: #ffffff; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; } .no-touch .cd-panel-close:hover::before { -webkit-transform: rotate(220deg); -moz-transform: rotate(220deg); -ms-transform: rotate(220deg); -o-transform: rotate(220deg); transform: rotate(220deg); } .no-touch .cd-panel-close:hover::after { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } .cd-panel-container { position: fixed; width: 90%; height: 100%; top: 0; background: #dbe2e9; z-index: 1; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s; } .from-right .cd-panel-container { right: 0; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .from-left .cd-panel-container { left: 0; -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .is-visible .cd-panel-container { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; } @media only screen and (min-width: 768px) { .cd-panel-container { width: 70%; } } @media only screen and (min-width: 1170px) { .cd-panel-container { width: 20%; } } .cd-panel-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 70px 5%; overflow: auto; /* smooth scrolling on touch devices */ -webkit-overflow-scrolling: touch; } .cd-panel-content p { font-size: 14px; font-size: 0.875rem; color: #424f5c; line-height: 1.4; margin: 2em 0; } .cd-panel-content p:first-of-type { margin-top: 0; } @media only screen and (min-width: 768px) { .cd-panel-content p { font-size: 16px; font-size: 1rem; line-height: 1.6; } } .cd-btn { visibility: visible !important; position: absolute; top: 400px; left: -50px; font-size: 16px; padding: 10px; margin: 0 0 !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="cd-panel from-right"> <header class="cd-panel-header"> <h1>Views</h1> <a href="#0" class="cd-panel-close">Close</a> </header> <div class="cd-panel-container"> <a href="#0" class="cd-btn">Views</a> <div class="cd-panel-content" ng-controller="ViewtreeCtrl"> <div> <ul class="collapsible-list"> <li class="nav-header">Views</li> <li class="collapsible-list-subnav" ng-repeat="treeObject in treeObjects"><a class="collapsible-list-parent">{{treeObject.name}}</a> <ul class="collapsible-list secondary"> <li class="collapsible-list-subnav"><a class="collapsible-list-parent">Public Views</a> <ul class="collapsible-list tertiary"> <li ng-repeat="publicView in treeObject.publicViews" ng-click="viewClick($event, publicView)"><a>{{publicView.title}}</a> </li> </ul> </li> <li class="collapsible-list-subnav"><a class="collapsible-list-parent">Private Views</a> <ul class="collapsible-list tertiary"> <li ng-repeat="privateView in treeObject.privateViews" ng-click="viewClick($event, privateView)"><a>{{privateView.title}}</a> </li> </ul> </li> </ul> </li> </ul> </div> </div> <!-- cd-panel-content --> </div> <!-- cd-panel-container --> </div> 

Answer 2

jQuery(document).ready(function($){
  //open the lateral panel
  $('.cd-btn').on('click', function(event){
  event.preventDefault();
//use toggleClass
  $('.cd-panel').toggleClass('is-visible');
   });

});

JSFIDDLE http://jsfiddle.net/Lecgrfvu/3/