toggle button on click in jquery

Question

First, let me clear you all one thing that i have already searched a lot but couldn't find the answer which will solve my problem. I have a button which when i click it's icon changes and some functions called than when i again click on that button it's icon must be revert and same functions called again.

I have this button:

<button type="button" class="btn" id="voice_icon" title="microphone">
<i style="font-size: 24px;" class="fa fa-microphone fa-2x voice_control" id="voice_control"></i>
<small class="toolbar-label mic-btn" id="mic">Mic.</small>
</button>

while clicking on that button these functions and classes should be called:

$('#voice_icon').click(function () {
        voiceAtion.voice();
        test.start();
        $('#voice_control').addClass("fa-microphone-slash").removeClass("fa-microphone");
        $('#mic').html("<i class='fa fa-spinner fa-pulse fa-1x fa-fw'></i>");
    });

And when i again click on that icon these icons and classes should be called again :

test.abort();
$('#voice_control').addClass("fa-microphone").removeClass("fa-microphone-slash");
$('#mic').html("Mic.");

$('#voice_icon').click(function() {
  voiceAtion.voice();
  test.start();
  $('#voice_control').addClass("fa-microphone-slash").removeClass("fa-microphone");
  $('#mic').html("<i class='fa fa-spinner fa-pulse fa-1x fa-fw'></i>");
});

test.abort();
$('#voice_control').addClass("fa-microphone").removeClass("fa-microphone-slash");
$('#mic').html("Mic.");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn" id="voice_icon" title="microphone">
<i style="font-size: 24px;" class="fa fa-microphone fa-2x voice_control" id="voice_control"></i>
<small class="toolbar-label mic-btn" id="mic">Mic.</small>
</button>

Satpal · Accepted Answer · 2017-11-08 06:50:29Z

4

Try something like this first time click goes to else and for second click it goes to if. so on..

$('#voice_icon').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
    //first code
  } else {
     //second code
  }
  $(this).data("clicks", !clicks);
});

edited Nov 8, 2017 at 6:50

Satpal

134k13 gold badges168 silver badges171 bronze badges

answered Nov 8, 2017 at 6:48

Znaneswar

3,3872 gold badges19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user8079593 Over a year ago

It's not working in the first time but working fine when i again clicks the button

Znaneswar Over a year ago

It will works .. in first click it goes to else condition. check fiddle : jsfiddle.net/p28ppsjb

Znaneswar Over a year ago

Initially var clicks takes undefined value so it will goes to else or you can swap your first and second code

user8079593 Over a year ago

what's the meaning of $(this).data("clicks", !clicks); this line?

Znaneswar Over a year ago

In your case $(this).data("clicks", !clicks); !clicks which is opposite value stores in to the clicks so every time you get only true and false which is exactly you required in this case

pavel · Accepted Answer · 2017-11-08 06:46:21Z

2

Instead of addClass/removeClass use toggleClass.

$('#voice_control').toggleClass("fa-microphone-slash fa-microphone");

answered Nov 8, 2017 at 6:46

pavel

27.3k11 gold badges47 silver badges63 bronze badges

3 Comments

Satpal Over a year ago

Only partial correct, You missed test.abort(); and $('#mic').html("Mic.");

pavel Over a year ago

@Satpal: if you think so, you can add your complete solution, or write why this one should be just partial.

user8079593 Over a year ago

what about the functions?

Bhargav Chudasama · Accepted Answer · 2017-11-08 06:50:52Z

use hasClass for check which class to remove and add

$(document).ready(function() {
  $('#voice_icon').click(function() {
    if ($('#voice_control').hasClass("fa-microphone")) {

      $('#voice_control').addClass("fa-microphone-slash").removeClass("fa-microphone");
      $('#mic').html("<i class='fa fa-spinner fa-pulse fa-1x fa-fw'></i>");
    } else {
      $('#voice_control').addClass("fa-microphone").removeClass("fa-microphone-slash");
      $('#mic').html("Mic.");
    }

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn" id="voice_icon" title="microphone">
<i style="font-size: 24px;" class="fa fa-microphone fa-2x voice_control" id="voice_control"></i>
<small class="toolbar-label mic-btn" id="mic">Mic.</small>
</button>

Deepak Kumar · Accepted Answer · 2017-11-08 06:59:22Z

   // You can also use global variable and check for true false:


   <button type="button" class="btn" id="voice_icon" title="microphone">
    <i style="font-size: 24px;" class="fa fa-microphone fa-2x voice_control" id="voice_control"></i>
    <small class="toolbar-label mic-btn" id="mic">Mic.</small>
</button>

    <script>
        var x = true;
        $('#voice_icon').click(function () {
            if(x){
               $('#voice_control').removeClass("fa-microphone").addClass("fa-microphone-slash")
               x = false;
           }
           else{
               $('#voice_control').addClass("fa-microphone").removeClass("fa-microphone-slash")
               x = true;
           }
            $('#mic').html("<i class='fa fa-spinner fa-pulse fa-1x fa-fw'></i>");
        });
    </script>

Collectives™ on Stack Overflow

toggle button on click in jquery

4 Answers 4

5 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related