change max-height by clicking collapse button

Question

Have the following puzzle: there are two tables on the page and a button. the table1 is shown at once and table2 is shown with the help of button toggle. The idea is that clicking the button causes not only expanding of table2 but should change the max-height of table1 (when table2 is expanded, table 1 becomes smaller and when table2 is not show, table1 is big ). I use knockout and its click doesn't work with bootstrap data-toggle="collapse" that is why the solution is done by

<button type="button" class="btn btn-primary" data-bind="click: showAllEvents ">events</button>

this.showAllEvents = function () {
  //things to do
   $("#table2").toggle(); // show and hide table2
   };

Do you have any ideas?

Answer 1

I made this to toggle the tables - codepen

The important bits -

html

<div class="table-container" data-bind="css: { expanded: expandTable}">

js

//Viewmodel
mynamespace.TableThing = function() {
  var self = this;
  self.expandTable= ko.observable(true);
  self.toggle = function(){
    if(self.expandTable()){
      self.expandTable(false)
    }else{
      self.expandTable(true)
    }
  }
};

css

.table-container{
  height:30px;
  overflow:hidden;
}
.table-container.expanded{
  height:100%;
}