How do I switch a class of buttons that trigger a player to appear and hide?

Question

I have 3 buttons in Link format with the classes: . icon-play, . icon-pause and . icon-download, I want to change the play class with pause, as well as the reverse without influencing the download button, as soon as the icon-play is clicked will show a player and if the pause is activated will hide the player.

var btnplay = $(".livro-audio a").find(".icon-play");
var btnpause = $(".livro-audio a").find(".icon-pause");

$( btnplay ).click(function() {
 $( '.player-active' ).show();
 $(this).attr('class', 'icon-pause');
 if($('.player-active:visible')){
    $( ".livro-audio" ).last().css( "margin-bottom", "150px" );
    $( ".livro-video" ).last().css( "margin-bottom", "150px" );
  }
});

$( btnpause ).click(function() {
  $( '.player-active' ).hidden();
  $(this).attr('class', 'icon-play');
  if($('.player-active:hidden')){
    $( ".livro-audio" ).last().css( "margin-bottom", "80px" );
    $( ".livro-video" ).last().css( "margin-bottom", "80px" );
  }

});

Until the moment Lucas gave me a light, staying like this:

 $(".livro-audio a").click(function(){
  if($(this).hasClass('icon-play')){
   $(this).addClass('icon-pause').removeClass('icon-play');
   $('.player-active').show();
  }
 else{
   $(this).addClass('icon-play').removeClass('icon-pause');
   $('.player-active').hide();
  }
});

Only that code messes with my third grade. icon-download, has some way to identify it, so it does not receive the play and pause classes when it is clicked, thank you.

Answer 1

You can use the addClass and removeClass to change the style in the widget.

Example:

$("#player").click(function(){
  if($(this).hasClass('player_azul'))
    $(this).addClass('player_ver').removeClass('player_azul');
  else 
    $(this).addClass('player_azul').removeClass('player_ver');
});

.player_azul{
  background: blue;
}

.player_ver{
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="player">Elemento</div>

This is just one example you can adapt to your case. In some situations it is interesting to use also the toggleClass jQuery.