toggle button on click in jquery

user8079593

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>

Znaneswar

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);
});

Collected from the Internet

Please contact [email protected] to delete if infringement.