引导显示/隐藏div左

Question

我试图做一个站点使用引导程序，我遇到了一个问题，我几乎可以，但并不完全解决。我想要做的是在md-2显示屏上显示div，并在按下按钮时隐藏。关键是我希望主div在隐藏时位于12位，在10位位于左边的位置时可以容纳它。

我能够显示和隐藏它没有问题，但我似乎得到主要股利相应地移动。我可以改变它的班级，但是我不能让主显示屏“移动”来适应它。发生什么事可以在小提琴查看下面使用这个jQuery

$('#layerbutton').click(function() { 
    $(".map").toggleClass('col-md-12 col-md-10'); 
    $("#tree").toggle("slide"); 
}); 

http://jsfiddle.net/ujcdrj46/1/

我有一种感觉，有一个简单的解决方案，这一点，但我就是没有知识弄明白。感谢您的任何帮助，您可以提供。

另外，请原谅长长的小提琴，我不能让它以任何其他方式工作。

Answer 1

您可以链.toggleClass()方法来达到理想的影响Demo

$('#layerbutton').on('click', function() { 
    $('#map').toggleClass('col-xs-10 col-md-10').toggleClass('col-xs-12 col-md-12'); 
    $("#tree").toggle("slide"); 
}); 

注：我添加了周围的地图div上Id属性以及包括.col-xs-*显示在拨弄这个工作。