摺疊一個列並自動調整另一個

Question

我正在努力與我的用戶界面（bootstrap）。我可以通過點擊左邊的小按鈕來隱藏navbar。這工作很好，沒有任何問題。它由css和一些包裝完成。但是我無法爲右側（綠色面板）執行相同的功能。我也試圖在崩潰課上做。如果我這樣做，主要內容（紅色窗口）不會自動縮放到右側的全部可用空間。那麼怎樣才能隱藏綠色面板並在整個寬度上縮放紅色內容？這可以通過CSS或JavaScript完成。任何幫助，將不勝感激。

小提琴：https://jsfiddle.net/DTcHh/27545/

CSS：

/* Sidebar Navigation Style */ 
.nav-sidebar { 
    position: absolute; 
    padding-left: 10px; 
    width: 175px; 
    height: 100%; 
    z-index: 1000; 
    display: block; 
    background-color: #eee; 
    border-right: 1px solid #eee; 
} 

/*   Wrapper   */ 
#wrapper { 
    padding-left: 175px; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 
#wrapper.toggled { 
    padding-left: 0px; 
} 

/*  Sidebar Wrapper  */ 
#sidebar-wrapper { 
    z-index: 1000; 
    left: 0px; 
    width: 0; 
    height: 100%; 
    margin-left: -205px; 
    overflow-y: auto; 
    overflow-x: hidden; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 
#sidebar-wrapper::-webkit-scrollbar { 
    display: none; 
} 

/*  Main SVG Content  */ 
#visualization { 
    display: inline-block; 
    position: relative; 
    left: 0px; 
    width: 100%; 
    padding-bottom: 100vh; /* aspect ratio */ 
    overflow: hidden; 
} 

HTML：

<div class="container-fluid"> 
<div id="wrapper"> 
    <div id="sidebar-wrapper"> 
     <ul class="nav nav-sidebar sidebar"> 
      <li class="sidebar-brand"> 
       <a>NavBar</a> 
      </li> 
     </ul> 
    </div> <!-- End Sidebar Wrapper --> 
    <div class="row" id="row-main-content"> 
     <div class="col-xs-9" style="background-color: red"> 
      <button type="button" class="btn btn-primary btn-xs glyphicon glyphicon-indent-right" id="btnHide"></button> 
      <button type="button" class="btn btn-primary btn-xs glyphicon glyphicon-list-alt pull-right" id="btnHide2"></button> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div id="visualization"> 
        </div> 
       </div> 
      </div> 
     </div> <!-- End Page Content Wrapper --> 
     <div class="col-xs-3" style="padding-right: 0px"> 
      <div class="panel panel-default"> 
       <div class="panel-body" style="height: 100vh; background-color: green"> 

       </div> 
      </div> 
     </div> <!-- End Panel Wrapper --> 
    </div> <!-- End Row --> 
</div> <!-- End Wrapper --> 
</div> 

的JavaScript：

/* Functionality for Toggle Sidebar Button */ 
$("#btnHide").click(function() { 
    $(this).tooltip("hide"); 
    $('#wrapper').toggleClass('toggled'); 
}); 

Answer 1

現在我解決我的問題與更新小提琴的jQuery

一點點的幫助：https://jsfiddle.net/DTcHh/27617/

jQuery Part我的問題：

$("#btnHide2").click(function() { 
    $(this).tooltip("hide"); 

    if ($('#panel-wrapper').hasClass('collapse')) { 
     $('#page-content-wrapper').removeClass('col-xs-12').addClass('col-xs-9'); 
     $('#panel-wrapper').removeClass('collapse') 
    } 
    else { 
     $('#page-content-wrapper').removeClass('col-xs-9').addClass('col-xs-12'); 
     $('#panel-wrapper').addClass('collapse') 
    } 
});