изменить максимальную высоту, нажав кнопку свернуть

Question

У вас есть следующая головоломка: на странице есть две таблицы и кнопка. таблица 1 отображается сразу, а таблица2 отображается с помощью кнопки переключения. Идея состоит в том, что нажатие кнопки вызывает не только расширение таблицы2, но и изменение максимальной высоты таблицы1 (когда таблица2 расширяется, таблица 1 становится меньше, а таблица2 не отображается, таблица1 большая). Я использую нокаута и его щелчок не работает с начальной загрузки данных-тумблер = «коллапс», а потому решение осуществляется

<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 
    }; 

Есть ли у вас какие-нибудь идеи?

Answer 1

Я сделал это для переключения таблиц - codepen

важные биты -

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%; 
}