toggle button with font awesome and jquery

Question

I thought this was going to be simple, but I am having a bit of hard time getting this to work. I am able to toggle once using .show and .hide, but not able to toggle back.

all the help would be appreciated.

here is the code:

<div class="middle">
    <i class="fa fa-toggle-on fa-2x active" id="on" style="display:none;"></i>
    <i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" id="off" ></i>
</div> 


$(document).ready(function(){

    $('.middle').click(function(){
        $('.inactive').show();
        $('.active').hide();

    })

    .click(function(){
        $('.inactive').hide();
        $('.active').show();

    });

});

I also have a pen of it here: http://codepen.io/lucky500/pen/qdZPLe

Answer 1

one approach is to use toggle

$(document).ready(function(){
    $('.middle').click(function() {
        $('.inactive, .active').toggle();
  });
});

http://codepen.io/miguelmota/pen/zGqPOX