kaleb/jsbin.oseZaZI.css

## jsbin.oseZaZI.css
.menu {
  background-color:white;
  border:1px solid red;
}

## jsbin.oseZaZI.html
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="view">
    <button type="button" class="menu-toggle">
      Toggle Menu
    </button>
    <div class="menu-container">
      <ul data-bind="style: { display: expanded() ? 'block' : 'none'}" class="menu">
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </div>
</div>
</body>
</html>

## jsbin.oseZaZI.js
ko.applyBindings({
  expanded: ko.observable(false)
}, view);

$('.menu-toggle').on('click', function () {
  var expanded = ko.dataFor(this).expanded;
  expanded(!expanded());
});

$('.menu').appendTo('body');
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<div id="view">
	<button type="button" class="menu-toggle">
	Toggle Menu
	</button>
	<div class="menu-container">
	<ul data-bind="style: { display: expanded() ? 'block' : 'none'}" class="menu">
	<li>one</li>
	<li>two</li>
	<li>three</li>
	</ul>
	</div>
	</div>
	</body>
	</html>
	ko.applyBindings({
	expanded: ko.observable(false)
	}, view);

	$('.menu-toggle').on('click', function () {
	var expanded = ko.dataFor(this).expanded;
	expanded(!expanded());
	});

	$('.menu').appendTo('body');