KnockoutJS - Visible Binding


As the name specifies, this binding causes the associated DOM element to be visible or hidden based on the value passed in the binding.


visible: <binding-condition>


  • When the parameter transforms into false-like value (such as boolean false, or 0, or null, or undefined), then the binding sets display:none for making it hidden. This is given more priority over any existing styles in CSS.

  • When the parameter transforms into true-like value (such as boolean true,or nonnull object or array ), the binding removes value, making it visible.

  • If this is an observable property, then the binding will update visibility every time the property changes. Else, it will just set the visibility once.

  • The parameter value can also be JavaScript function or arbitrary JavaScript expression that returns a Boolean. DOM element is made visible or hidden based on the output.


Let us take a look at the following example.

<!DOCTYPE html>
      <title>KnockoutJS Visible Binding</title>
      <script src = "" 
         type = "text/javascript"></script>

      <div data-bind = "visible: showMe">
         You are seeing this line because showMe function is set to true.

         function AppViewModel() {
            this.showMe = ko.observable(false);  // hidden initially

         var vm = new AppViewModel();
         ko.applyBindings(vm);                  //  shown now



Let's carry out the following steps to see how the above code works −

  • Save the above code in visible-bind.htm file.

  • Open this HTML file in a browser.