javascript - Want to close the sidepanel using the minus icon -
currently sidepanel opens using plus symbol , closed using close btn on sidepanel. plus symbol changes minus doesn't go plus when sidepanel closed , want able click minus symbol , close sidepanel well.
hope made point clear. here jsfiddle related it: https://jsfiddle.net/bob_js/h9yfbden/1/
html
<div class="container"> <i class="glyphicon glyphicon-plus-sign cd-btn"></i> </div> <div class="cd-panel-nvv from-right"> <header class="cd-panel-header"> <a href="#0" class="cd-panel-close"></a> </header> <div class="cd-panel-container"> content </div> </div> css
.glyphicon-plus-sign, .glyphicon-minus-sign{ top: 30%; position: absolute !important; z-index: 1; color: rgb(255, 133, 102); background-color: #fff; border-radius: 50%; border: 1px solid #fff; cursor: pointer; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; } .glyphicon-plus-sign:hover, .glyphicon-minus-sign:hover { -webkit-transform: scale(1.3); transform: scale(1.3); } *, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *::after, *::before { content: ''; } { color: #89ba2c; text-decoration: none; } .cd-main-content { text-align: center; } .cd-main-content .cd-btn { position: relative; display: inline-block; background-color: #89ba2c; color: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1); -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; } .no-touch .cd-main-content .cd-btn:hover { -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3); } .cd-main-content .cd-btn-val { position: relative; display: inline-block; background-color: #89ba2c; color: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1); -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; } .no-touch .cd-main-content .cd-btn-val:hover { -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3); } .cd-panel { position: fixed; top: 0; left: 0; visibility: hidden; -webkit-transition: visibility 0s 0.6s; -moz-transition: visibility 0s 0.6s; transition: visibility 0s 0.6s; font-family: 'open sans', sans-serif; z-index: 9; } .cd-panel::after { /* overlay layer */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; cursor: pointer; -webkit-transition: background 0.3s 0.3s; -moz-transition: background 0.3s 0.3s; transition: background 0.3s 0.3s; } .cd-panel.is-visible { visibility: visible; -webkit-transition: visibility 0s 0s; -moz-transition: visibility 0s 0s; transition: visibility 0s 0s; } .cd-panel.is-visible::after { background: rgba(0, 0, 0, 0.6); -webkit-transition: background 0.3s 0s; -moz-transition: background 0.3s 0s; transition: background 0.3s 0s; } .cd-panel.is-visible .cd-panel-close::before { -webkit-animation: cd-close-1 0.6s 0.3s; -moz-animation: cd-close-1 0.6s 0.3s; animation: cd-close-1 0.6s 0.3s; } .cd-panel.is-visible .cd-panel-close::after { -webkit-animation: cd-close-2 0.6s 0.3s; -moz-animation: cd-close-2 0.6s 0.3s; animation: cd-close-2 0.6s 0.3s; } @-webkit-keyframes cd-close-1 { 0%, 50% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(45deg); } } @-moz-keyframes cd-close-1 { 0%, 50% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(45deg); } } @keyframes cd-close-1 { 0%, 50% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } } @-webkit-keyframes cd-close-2 { 0%, 50% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(-45deg); } } @-moz-keyframes cd-close-2 { 0%, 50% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(-45deg); } } @keyframes cd-close-2 { 0%, 50% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } } .cd-panel-header { position: fixed; height: 27px; width: 3%; background-color: transparent; z-index: 2; box-shadow: 0 1px 1px rgba(0, 0, 0, 0); -webkit-transition: top 1.3s 0s; -moz-transition: top 1.3s 0s; transition: top 1.3s 0s; } .from-right .cd-panel-header, .from-left .cd-panel-header { top: -50px; } .from-right .cd-panel-header { right: 20px; } .from-left .cd-panel-header { left: 0; } .is-visible .cd-panel-header { top: 0; -webkit-transition: top 1.3s 0.3s; -moz-transition: top 1.3s 0.3s; transition: top 1.3s 0.3s; } @media screen , (min-width: 1471px) { .cd-panel-header { height: 30px; } } .cd-panel-close { position: absolute; top: 0; right: 0; height: 100%; width: 40px; /* 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: 11px; left: 20px; height: 3px; width: 15px; background-color: #fff; /* fixes bug pseudo elements 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: transparent; } .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; height: 100%; top: 0; background: #901818; border-left: 1px solid #c8cacc; z-index: 1; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 1.8s; -moz-transition-duration: 1.8s; transition-duration: 1.8s; -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s; z-index: 1; overflow-y: auto; } .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: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s; } @media screen , (min-width: 768px) { .cd-panel-container { width: 23.5%; } } @media screen , (min-width: 1271px) { .cd-panel-container { width: 23.5%; } } @media screen , (min-width: 1471px) { .cd-panel-container { width: 23.5%; } } jquery
$(".glyphicon-minus-sign, .glyphicon-plus-sign").click(function(){ $(this).toggleclass("glyphicon-minus-sign glyphicon-plus-sign"); }); jquery(function($){ //open lateral panel $('.cd-btn').on('click', function(event){ event.preventdefault(); $('.cd-panel').addclass('is-visible'); }); //close 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(); } }); });
you not far...
i changed addclass toggleclass
in $('.cd-btn').on('click'....
and added $('.cd-btn').toggleclass("glyphicon-minus-sign glyphicon-plus-sign");
to $('.cd-panel').on('click'....
$(".glyphicon-minus-sign, .glyphicon-plus-sign").click(function(){ $(this).toggleclass("glyphicon-minus-sign glyphicon-plus-sign"); }); //nvv jquery(function($){ //open lateral panel $('.cd-btn').on('click', function(event){ event.preventdefault(); $('.cd-panel').toggleclass('is-visible'); }); //close 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'); $('.cd-btn').toggleclass("glyphicon-minus-sign glyphicon-plus-sign"); event.preventdefault(); } }); }); updated fiddle
Comments
Post a Comment