Mathieu Mathieu - 5 months ago 38
jQuery Question

Prevent event firing when double click on bootstrap icon

I have a standard card with a icon "Plus", which when clicked become an icon "minus" and lets user see content
If user clicks again on this icon "minus" the content gets hidden and the icon "plus" replace the icon "minus".

See here: https://jsfiddle.net/DTcHh/22354/

It works fine but the problem is that at least on my computer(chrome 40)and my mobile (android/chrome) , if I really click fast twice (like a double click), all gets "jammed up" and instead of seeing the "plus" icon when there is no content I end up seeing all the contrary I would like.

For example If I double click fast on the "plus icon", this is what I see (I should not see "this is my content when the "plus" icon is visible"):

enter image description here

What to do?

I tried using a debounce script and something like the following but it did not work:

function debounce(fn, wait) {
var timeout;
return function () {
clearTimeout(timeout);
timeout = setTimeout(function () {
fn.apply(this, arguments)
}, (wait || 1));
}
}

if (window.addEventListener) {
// For all major browsers, except IE 8 and earlier
window.addEventListener('resize', debounce(function () {
console.log('clicked');
clickhere();
}, 250));

function clickhere() {
var list = $('.cards-list')
$('li', list).click(function(e){
var card=$(this);
$(this).find(".glyphicon").toggleClass("glyphicon-
minus").toggleClass("glyphicon-plus");
});
}


Current code:

HTML

<div id="operation-zone">
<ul class="cards-list">

<li class="card 354" data-opcode="CATIMINI26">

<div class="card-content" id="accordion_354">

<a class="card-detail-opener" id="BtnHomeOperationExpand_53313" role="button" data-toggle="collapse" data-parent="#accordion_354" href="#collapseOne_354" aria-expanded="false" aria-controls="collapseOne_354">

<i class="glyphicon glyphicon-plus detail-icon_354"></i>
</a>

<div class="card-image card-lazy-preloader" id="accordion2">
<a href="/campaigns/xxxxx">
</a><figure><a href="/campaigns/xxxxxx"> </a>
<!-- responsive image -->
<img style="opacity: 1; display: block;" id="HPImageBanner_354" src="http://vp-eu.scene7.com/is/image/vpeu/0/00_54093_FR_brandvisualnbrandvisualfr">
</figure>

</div>



</div>

<div id="collapseOne_354" class="one-column-info details panel-collapse collapse left-aligned" role="tabpanel" aria-labelledby="headingOne" style="height: auto;">

<div id="DivHomeOperationDescription_52850" class="description">
this is the content
</div>

<div class="card-info-actions">
<a class="btn btn-lg btn-primary" href="/campaigns/operation-in-venicesqqsqssqsqsqsqsqsqss">go Now &gt;</a>
</div>
</div>



</li>

</ul>


JS

var list = $('.cards-list')
$('li', list).click(function(e){
var card=$(this);
$(this).find(".glyphicon").toggleClass("glyphicon-minus").toggleClass("glyphicon-plus");
});


CSS

.cards-list {
list-style: none;
display: block;
height: auto;
}
.card {
text-align: left;
width: 100%;
border-bottom: 1px solid black;
position: relative;
}

.card-content {
background: #fff;
position: relative;
}
.card-image {
vertical-align: top;
img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
color: green;
}
position: relative;
line-height: 0;
overflow: hidden;
padding-bottom: 33.88%;
}
.container .jumbotron {
padding-left: 0px;
padding-right: 0px;
}

.card-detail-opener {
color: green;
font-size: 16px;
text-align: center;
padding-left: 1px;
width: 25px;
height: 25px;
border-radius: 50%;
line-height: 27px;
background: grey;
position: absolute;
z-index: 2;
opacity: .75;
filter: alpha(opacity=75);
bottom: 60%;
right: 30%;
&:hover { background: #7E7E7E; }
&:focus { background: #7E7E7E; }
}

}

.card-detail-opener:link {
color: green;

}
.glyphicon.glyphicon-remove {
color: #333;
&:hover { color: green; }
&:focus { color: green; }
}
.glyphicon.glyphicon-plus {
top:1px;
color: #333;
&:hover { color: #ffffff; }
&:focus { color: #ffffff; }

}
.glyphicon.glyphicon-minus {
top:2px;
padding-right: 2px;//tweak to center
color: #333;
&:hover { color: #ffffff; }
&:focus { color: #ffffff; }

}


// Content of the card details in the 1-column view
.card .details {

padding-top: 10px;
background-color: rgba(255,255,255,1);

}
.details {
padding-left: 1em;
}
.details .dates {
padding-top: 10px;
font-size: .8em;
line-height: 1.6em;
color: #464650;
margin-right: 1em;
background-size: 90px auto !important;
background-repeat: no-repeat !important;
background-position-x: right !important;
background-position-y: 0px !important;
margin-bottom: 8px;
}
.details .baseline {
color: #888;
font-size: 0.75em;
line-height: 0.4em;
}
.details .description {
font-size: .65em;
color: #464650;
line-height: 1.1em;
overflow: hidden;

}
// End of content of the card details in the 1-column view
.card-info-actions {
float: right;
padding: 0 5px 2px 0;
clear: both;
}
//smaller buttons for cards
.card-info-actions .btn-primary {
font-size: 15px;
}

.card-short-info a.dateSales {
color: #464650;
}
.info-overlay {
display:none;
z-index:999;
position:absolute;
height:100%;
width: 100%;
background-color: rgba(255,255,255,.9);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF)\9";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF);
transition: all .4s ease-in-out;
border-bottom: 4px solid green;
}

.close-overlay {
float:right;
padding:5px;
}

.info-overlay a {
display: block;
line-height: normal;
text-decoration: none;
cursor: pointer;
}


As it's quite tricky , sharing updated jsfiddle with solution working would be appreciated

Answer
<i id="icon" class="glyphicon glyphicon-plus detail-icon_354"></i>

$('#collapseOne_354').on('show.bs.collapse', function() {
  $('#icon').removeClass('glyphicon-plus').addClass('glyphicon-minus');
});
$('#collapseOne_354').on('hide.bs.collapse', function() {
  $('#icon').removeClass('glyphicon-minus').addClass('glyphicon-plus');
});

JSFIDDLE

or using only CSS:

<i class="glyphicon glyphicon-plus detail-icon_354"></i>

.card-detail-opener[aria-expanded=false] i:before {
  content: '\2b';
}
.card-detail-opener[aria-expanded=true] i:before {
  content: '\2212';
}

JSFIDDLE

Comments