您需要做的是为每个可隐藏的div指定一个共享类名，并为其指定自己的唯一ID

<div  class="col-md-4 col-sm-4" >
   <div id="one" class="hideMeBox">
    <img  src="http://www.starwarscats.com/wp-content/uploads/2013/02/storm-trooper-cats.jpg" style="max-width: 150px;"/>
  </div>
 </div>
 <div  class="col-md-4 col-sm-4">
  <div id="two" class="hideMeBox">
   <img  src="http://www.starwarscats.com/wp-content/uploads/2013/01/cat-costume-darth-vader.jpg" style="max-width: 150px;"/>
  </div>
 </div>
 <div  class="col-md-4 col-sm-4">
  <div id="three" class="hideMeBox">
   <img src="https://futureofstarwars.files.wordpress.com/2014/09/cat-helpmeobiwan.jpg" style="max-width: 150px;"/>
  </div>
</div>

定义用于控制的按钮：

<div class="btn btn-large btn-info" id="hideOne">One</div>
<div class="btn btn-large btn-warning" id="hideTwo">Two</div>
<div class="btn btn-large btn-danger" id="hideThree">Three</div>

在Jquery中，绑定到您的按钮点击并插入隐藏/显示选项

$('#hideOne').click(function() {
 $.when($('.hideMeBox').not($("#one")).slideDown("slow")).done(function() { $( "#one" ).slideToggle( "slow"); });
});

$('#hideTwo').click(function() {
 $.when($('.hideMeBox').not($("#two")).slideDown("slow")).done(function() { $( "#two" ).slideToggle( "slow"); });
});

$('#hideThree').click(function() {
  $.when($('.hideMeBox').not($("#three")).slideDown("slow")).done(function() { $( "#three" ).slideToggle( "slow"); });
});

你在这里实际上做的是点击按钮，对每个类发出一个jquery show animation（slideDown），除了包含ID的元素。然后在目标div上发出切换动画。你不必检查/跟踪显示/隐藏的状态，因为jQuery将自动切换它当前所处的任何状态。
这是一个陷阱：
当你需要在多个元素上执行这样的动画时（通过类而不是单个ID调用动画），它所做的就是把它们放在队列中。
如果您尝试在动画上使用普通的complete回调函数（如

$( ".whatever" ).slideDown( "slow", function() {
// Animation complete.
});

每当队列中的动画完成时，它将调用动画完成函数。
延迟对象的出现保存了这一天。在这种特定情况下，您应该查看jQuery.when（）
https://api.jquery.com/jquery.when/
根据API文档：
当多个Deferred对象被传递给jQuery.when（）时，该方法从一个新的“主”Deferred对象返回Promise，该对象跟踪所有已传递的Deferred对象的聚合状态。该方法将在所有Deferred解析后立即解析其主Deferred，或者在其中一个Deferred被拒绝后立即拒绝主Deferred。如果主延迟被解析，则执行主延迟的doneCallbacks。传递给doneCallbacks的参数为每个Deferreds提供解析值，并与传递给jQuery.when（）的Deferreds中的顺序相匹配
工作示例如下：https://jsfiddle.net/qs4v999p/9/

查看this codepen。它不使用任何回调函数，只使用原生Bootstrap类名进行可折叠。这就是你想要做的吗你可以同时打开两个可折叠元素而不是 accordion 效果？
HTML

<div class="container">
  <a href="#demo" class="btn btn-info" data-toggle="collapse">Simple collapsible</a>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit
  </div>

  <br>

  <a href="#demo2" class="btn btn-info" data-toggle="collapse">Another collapsible</a>
  <div id="demo2" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit
  </div>
</div>