How do I data-bind = “visible : active” in div

Question

hi this is my code snippet:

<div class="showtimes" data-bind="visible: showHide">
 <div data-bind="template: { name: 'movie-grouped-showtimes-template', data: $data }"></div>
</div> 

I want to toggle showHide off and on using the following:

<a class="icon arrow" data-bind="click: $parent.showtimes">

can't I just set up a variable showHide in my view Model, like the following:

self.showHide = ko.observable(false) ... Hide

showHide(true); ... show

and can I set it using the click : $parent.showtimes , like in the following:

<a class="icon arrow" data-bind="click: $parent.showtimes"></a>        

Answer 1

You just have to set a function in the viewmodel that binds to the button's click (or modify an existing one, like showTimes in this case) to toggle the value of showHide.

Here's a simple example: http://jsfiddle.net/EfrainReyes/LNzDL/

var vm = {
    showHide: ko.observable(false),
    toggle: function() {
        this.showHide( !this.showHide() );
    }
};

ko.applyBindings(vm);

I didn't add any other elements to the example because the question seems to be targeted more towards showing/hiding the div.