How to toggle Bootstrap 3 classes?

I have this halfway working and have two columns. One column holds photo listings col-md-8 and the other shows a map col-md-4. My goal is to toggle the map and show the listings column taking up all 12 columns. Right now I have only figured out how to hide the map and expand the listings column but now it needs to show back. I also need to switch the button text show/hide based on toggled state. Any help appreciated.

Here is what I figured out so far.

$("#btn").click(function(e) {
 e.preventDefault();
 $('#map').hide();
 $('.expand-column').removeClass('col-md-8');
 $('.expand-column').addClass('col-md-12');
    });

Answer

You can replace the current methods with toggle methods and make what you currently have work both ways

$("#btn").click(function(e) {
     e.preventDefault();
     $('#map').toggle();
     $('.expand-column').toggleClass('col-md-8 col-md-12'); 
});

I’ll leave it to you to come up with a variable or another class to keep track of the current state with and use that to determine the text