Bob Bob - 26 days ago 12
CSS Question

Functionality of close not working properly

I have multiple buttons in the project, which opens multiple sidepanels.
If we click plus icon it would open the sidepanel, which can be closed using minus icon as well as the close button on the sidepanel.

Icon would toggle to minus and plus.

But when I click on the second plus icon the second panel opens, but the first panel doesn't close - it just gets covered by the second panel.

Please see the JSfiddle for it.
https://jsfiddle.net/bob_js/cpagL7qz/1/

HTML

<i class="glyphicon glyphicon-plus-sign cd-btn-a abc"></i>
<div class="container">
<i class="glyphicon glyphicon-plus-sign cd-btn"></i>
</div>
<div class="cd-panel from-right">
<header class="cd-panel-header">
<a href="#0" class="cd-panel-close"></a>
</header>
<div class="cd-panel-container">
Content
</div>
</div>
<div class="cd-panel-a from-right">
<header class="cd-panel-header">
<a href="#0" class="cd-panel-close"></a>
</header>
<div class="cd-panel-container color">
Content
</div>
</div>


CSS:

.color{
background-color: green !important;
}
.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: all .2s ease-in-out;
transition: all .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: '';
}

a {
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: all 0.2s;
-moz-transition: all 0.2s;
transition: all 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: all 0.2s;
-moz-transition: all 0.2s;
transition: all 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 only screen and (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;
/* 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: 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 only screen and (min-width: 768px) {
.cd-panel-container {
width: 30.5%;
}
}
@media only screen and (min-width: 1271px) {
.cd-panel-container {
width: 23.5%;
}
}
@media only screen and (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 the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
$('.cd-panel').toggleClass('is-visible');
});
//close 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');
$('.cd-btn').toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
event.preventDefault();
}
});
});

jQuery(function($){
//open the lateral panel
$('.cd-btn-a').on('click', function(event){
event.preventDefault();
$('.cd-panel-a').toggleClass('is-visible');
});
//close the lateral panel
$('.cd-panel-a').on('click', function(event){
if( $(event.target).is('.cd-panel-a') || $(event.target).is('.cd-panel-close') ) {
$('.cd-panel-a').removeClass('is-visible');
$('.cd-btn-a').toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
event.preventDefault();
}
});
});

Answer

Check the updated Fiddle

You need to check it in the JS:

$(".glyphicon-minus-sign, .glyphicon-plus-sign").click(function(){
    $(this).toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
});


jQuery(function($){
    //open the lateral panel
    $('.cd-btn').on('click', function(event){
        event.preventDefault();
        $('.cd-panel').toggleClass('is-visible');
    // CHECKING ICON OF .cd-btn-a
    if($('.cd-btn-a').hasClass('glyphicon-minus-sign')) {
       $('.cd-btn-a').toggleClass('glyphicon-minus-sign glyphicon-plus-sign');
       $('.cd-panel-a').removeClass('is-visible');
     }
    });
    //close 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');
            $('.cd-btn').toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
            event.preventDefault();
        }
    });
});

jQuery(function($){
    //open the lateral panel
    $('.cd-btn-a').on('click', function(event){
        event.preventDefault();
        $('.cd-panel-a').toggleClass('is-visible');
    // CHECKING ICON OF .cd-btn
    if($('.cd-btn').hasClass('glyphicon-minus-sign')) {
       $('.cd-btn').toggleClass('glyphicon-minus-sign glyphicon-plus-sign');
       $('.cd-panel').removeClass('is-visible');
     }
    });
    //close the lateral panel
    $('.cd-panel-a').on('click', function(event){
        if( $(event.target).is('.cd-panel-a') || $(event.target).is('.cd-panel-close') ) { 
            $('.cd-panel-a').removeClass('is-visible');
            $('.cd-btn-a').toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
            event.preventDefault();
        }
    });
});

Hope this helps!

Comments