在Bootstrap中折叠时更改面板宽度

Question

我试图改变bootstrap中的崩溃行为，但没有成功。

我想创建一个包含小面板的页面（可能col-md-4，我将其命名为标签），在面板折叠后，点击后会更改宽度。

以下是第一页的示例：

点击＆＃34;标签＆＃34;：

后，这是同一页面

我当前的代码无法隐藏<div>something here</div>并更改面板的宽度。

下面是一个具有简单折叠效果的面板的代码。

<section class="col-md-4">
 <h3 class="page-header title">Forms</h3>
 <div class="panel-group">
   <div id="panel-form-1" class="panel panel-default">
       <div class="panel-heading">
           <h4 class="panel-title">
               <span class="glyphicon glyphicon-chevron-right"></span><a data-toggle="collapse" href="#panel1"> Panel #1</a>
           </h4>
       </div>
       <div id="panel1" class="panel-collapse collapse">
           <div class="panel-body">
               <form role="form" id="form1">
                   <div class="row">
                       <div class="col-md-6">
                           <div>Stuff</div>
                       </div>
                   </div>
               </form>
           </div>
           <div class="panel-footer">
               <span class="glyphicon glyphicon-question-sign"></span>
           </div>
       </div>
   </div>
   <!-- Other panels-->
 </div>
         </section> 
 <div class="col-md-8 something">Something here</div>

JS（不工作。没有控制台错误）：

<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
     $('.collapse').on('show.bs.collapse', function (e) {
   $(this).parent("section").removeClass("col-md-4").addClass("col-md-12");
   $(document).find("div.something").hide();
});
</script>

我打开面板的结果页面就像（请忽略glyphicon问题）：

我试图在另一个question here in SO中关注这个例子，但我对此并不了解。

是否可以使用bootstrap实现它？

其他：

• Bootstrap 3.3.7
• JQuery 3.1.1
• Chrome和Firefox