Question

I am not the most experienced jquery author and I came up with a solution to a simple problem, but to me it doesn’t seem like the best way to do it. I think the code explains it best:

$("#play_button").click( function () {
    $("#play_button").hide();
    $("#pause_button").show();
});

$("#pause_button").click( function () {
    $("#play_button").show();
    $("#pause_button").hide();
});

Any suggestions on a better block of code to accomplish the same thing?

Answer 1

Assuming one starts visible, and the other doesn’t:

$("#pause_button, #play_button").click(function(){
  $("#play_button, #pause_button").toggle();
});

Online demo: http://jsbin.com/ewave/edit

If you apply a simple class to both: class='button', you can make it even simpler:

$(".button").click(function(){
  $(".button").toggle();
});