Hide respective div on respective button click

[Trushanti Pare]

I have 2 divs. One contain toggle buttons and other different divs with charts.

I want to show respective div on respective button click but not able to it. Can please anyone help

 <div class="btn-group" data-bind='foreach: Buttons, visible : Buttons().length >= 1'>

          <button type="button" data-bind="attr: { class: active()==true?'btn focus':'btn'}, click: $root.buttonclick" data-toggle="buttons"><span data-bind="text: title"></span></button>

 </div>

<div class="tab-content" data-bind='foreach: Buttons'>

        <div data-bind="attr: { class: active()==true?'tab-pane row active':'tab-pane row',id:id }" data-toggle="buttons">

                <div data-bind="foreach: DataSources, attr: { class: active()==true?'tab-pane row active':'tab-pane row',id:id }">

                         ...

                </div>

       </div>

</div>

by this code button's class getting changed but div's not.

[Andrew Vickers]

The best way that I've found to implement tabs in KO is with Michael Best's knockout-switch-case.

You would simply create an observable such as this.chart.  Your button clicks would update the observable to something like 'bar' or 'pie'.

Then you would switch the observable with cases containing each of the tabs contents.

You can also accomplish this with the if binding, but it's a lot more verbose.