引导显示/隐藏div左

Question

我试图使用引导创建一个网站，我遇到了一个问题，我几乎可以，但没有完全解决。我想做的是让一个div在md-2显示和隐藏时，一个按钮被按下。关键是，我希望主div是在12，当它是隐藏，在10，以容纳左栏时，它是存在的。

我可以显示和隐藏它没有问题，但我似乎可以得到主div相应的移动。我可以更改它的类，但是我不能让主显示器“移动”来容纳它。使用这个jquery可以在下面的小提琴上看到发生的事情。

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

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

我有一种感觉，有一个简单的解决办法，但我只是没有知识来解决它。谢谢你能提供的任何帮助。

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

Answer 1

您可以链接.toggleClass()方法以实现所需的影响演示

$('#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-*，以在Fiddle中显示这一点。