kollabieren ein col und auto-adjust das andere

Question

Ich habe Probleme mit meiner Benutzeroberfläche (Bootstrap). Ich bin in der Lage, die navbar durch Klicken auf die linke kleine Schaltfläche zu verbergen. Das funktioniert ganz gut ohne Probleme. Es ist fertig von css und einige Wrapper. Aber ich kann nicht die gleiche Funktionalität für die rechte Seite (grünes Feld). Ich habe es auch mit der Kollapsklasse versucht. Wenn ich es so mache, skaliert der Hauptinhalt (rotes Fenster) nicht automatisch auf den vollen verfügbaren Platz auf der rechten Seite. Wie ist es also möglich, das grüne Panel zu verstecken und den roten Inhalt auf die volle Breite zu skalieren? Dies kann durch CSS oder JavaScript erfolgen. Jede Hilfe wäre willkommen.

Fiddle: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

löste ich mein Problem nun mit Hilfe von ein wenig jQuery

Fiddle aktualisiert:https://jsfiddle.net/DTcHh/27617/

jQuery Part für mein Problem:

$("#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') 
    } 
});