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');
});
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
After implementing charlietfl answer, here is what I came up with for handling the current state of the toggling text.
$("#btn").click(function(e) {
e.preventDefault();
if($(this).text()=="hide map") {
$(this).text("show map");
} else {
$(this).text("hide map");
}
$('#map').toggle();
$('.expand-column').toggleClass('col-md-8 col-md-12');
$('.constrain-photos').toggleClass('col-lg-3 col-lg-2');
return false;
});