CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapglyphicons
Raviteja
Raviteja

Reputation: 3479

How to prevent double click of "click" jquery

I've this simple Fiddle where if a user clicks plus glyphicon, I show the collapsed content and change the glyphicon to 'minus' and vice-versa on click of minus glyphicon.

But, when I double click the plus glyphicon, the content shows and the glyphicon is not changed to minus. For the next single clicks, the content is shown when 'minus' glyphicon appears. How can I prevent the double click ?

HTML

<div class="divcontainer"> 
    <span>Click -----></span>
    <span class="glyphicon glyphicon-plus" data-toggle="collapse" href="#collapsecontent"></span>
</div>
<div class="collapse" id="collapsecontent">
    content
</div>

jQuery

$(document).ready(function () {
    $('.glyphicon-plus').click(function () {
        $(this).parent("div").find(".glyphicon-plus")
            .toggleClass("glyphicon-minus");
    });
});

Upvotes: 0

Views: 5068

Answers (4)

Shweta Ranpise
Shweta Ranpise

Reputation: 102

Instead of 'onclick' function use collapse hide and show events. Please refer below code:

$(document).ready(function() {
  $('#collapsecontent').on('show.bs.collapse', function(args) {
    onContainerClick($(this).parent());
  });

  $('#collapsecontent').on('hide.bs.collapse', function(args) {
    onContainerClick($(this).parent());
  });
});

function onContainerClick(args) {
  $(args).find(".glyphicon-plus")
    .toggleClass("glyphicon-minus");
}

Upvotes: 1

ABDUL JAMAL
ABDUL JAMAL

Reputation: 452

try this 

$(this).prop('disabled', true);

Upvotes: 1

Sum IP Cresta
Sum IP Cresta

Reputation: 11

just use your own jquery handler. Remove data-toggle attr and use this

$(document).ready(function () {
    $('.glyphicon-plus').click(function () {
     $('.collapse').slideToggle();
     $(this).parent("div").find(".glyphicon").toggleClass("glyphicon-plus").toggleClass("glyphicon-minus");
    });
});

I think it should work now.

Upvotes: 1

Sagar V
Sagar V

Reputation: 12478

add dblclick event handler too

$(document).ready(function () {
    $('.glyphicon-plus').click(function () {
        $(this).parent("div").find(".glyphicon-plus")
            .toggleClass("glyphicon-minus");
    });
    $('.glyphicon-plus').dblclick(function () {
        $(this).parent("div").find(".glyphicon-plus")
            .toggleClass("glyphicon-minus");
    });
});
.divcontainer{
     background:aqua;
     width:100%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="divcontainer"> 
    <span>Click -----></span>
    <span class="glyphicon glyphicon-plus" data-toggle="collapse" href="#collapsecontent"></span>
</div>
<div class="collapse" id="collapsecontent">
    content
</div>

Upvotes: 1

Related Questions