MattFriedman/knockout_accordion.html

## knockout_accordion.html
<html>
<head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js" type="text/javascript"></script>

    <style type="text/css">

        #menu {
            width: 400px;
            cursor: pointer;
        }

        .header {
            background-color: #a2a2a2;
        }

        .items {
            background-color: #c5c5c5;
        }
    </style>
</head>
<body>

<div data-bind="foreach:groups" id="menu">
    <div class="header" data-bind="text:name, accordion: openState, click: toggle">&nbsp;</div>
    <div class="items" data-bind="foreach:items">
        <div data-bind="text:name">&nbsp;</div>
    </div>
</div>

<script type="text/javascript">

    ko.bindingHandlers.accordion = {

        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            $(element).next().hide();
        },
        update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

            var slideUpTime = 300;
            var slideDownTime = 400;

            var openState = ko.utils.unwrapObservable(valueAccessor());
            var focussed = openState.focussed;
            var shouldOpen = openState.shouldOpen;

            if (focussed) {

                var clickedGroup = viewModel;

                $.each(bindingContext.$root.groups(), function (idx, group) {
                    if (clickedGroup != group) {
                        group.openState({focussed: false, shouldOpen: false});
                    }
                });
            }

            var dropDown = $(element).next();

            if (focussed && shouldOpen) {
                dropDown.slideDown(slideDownTime);
            } else if (focussed && !shouldOpen) {
                dropDown.slideUp(slideUpTime);
            } else if (!focussed && !shouldOpen) {
                dropDown.slideUp(slideUpTime);
            }
        }
    };

    function ViewModel() {

        var self = this;
        self.groups = ko.observableArray([]);

        function Group(id, name) {

            var self = this;
            self.id = id;
            self.name = name;

            self.openState = ko.observable({focussed: false, shouldOpen: false});

            self.items = ko.observableArray([]);

            self.toggle = function (group, event) {
                var shouldOpen = group.openState().shouldOpen;
                self.openState({focussed: true, shouldOpen: !shouldOpen});
            }
        }

        function Item(id, name) {
            var self = this;
            self.id = id;
            self.name = name;
        }

        var g1 = new Group(1, "Group 1");
        var g2 = new Group(2, "Group 2");
        var g3 = new Group(3, "Group 3");

        g1.items.push(new Item(1, "Item 1"));
        g1.items.push(new Item(2, "Item 2"));

        g2.items.push(new Item(3, "Item 3"));
        g2.items.push(new Item(4, "Item 4"));
        g2.items.push(new Item(5, "Item 5"));

        g3.items.push(new Item(6, "Item 6"));

        self.groups.push(g1);
        self.groups.push(g2);
        self.groups.push(g3);
    }

    ko.applyBindings(new ViewModel());

</script>

</body>
</html>
	<html>
	<head>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js" type="text/javascript"></script>

	<style type="text/css">

	#menu {
	width: 400px;
	cursor: pointer;
	}

	.header {
	background-color: #a2a2a2;
	}

	.items {
	background-color: #c5c5c5;
	}
	</style>
	</head>
	<body>

	<div data-bind="foreach:groups" id="menu">
	<div class="header" data-bind="text:name, accordion: openState, click: toggle"> </div>
	<div class="items" data-bind="foreach:items">
	<div data-bind="text:name"> </div>
	</div>
	</div>

	<script type="text/javascript">

	ko.bindingHandlers.accordion = {

	init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
	$(element).next().hide();
	},
	update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

	var slideUpTime = 300;
	var slideDownTime = 400;

	var openState = ko.utils.unwrapObservable(valueAccessor());
	var focussed = openState.focussed;
	var shouldOpen = openState.shouldOpen;

	if (focussed) {

	var clickedGroup = viewModel;

	$.each(bindingContext.$root.groups(), function (idx, group) {
	if (clickedGroup != group) {
	group.openState({focussed: false, shouldOpen: false});
	}
	});
	}

	var dropDown = $(element).next();

	if (focussed && shouldOpen) {
	dropDown.slideDown(slideDownTime);
	} else if (focussed && !shouldOpen) {
	dropDown.slideUp(slideUpTime);
	} else if (!focussed && !shouldOpen) {
	dropDown.slideUp(slideUpTime);
	}
	}
	};

	function ViewModel() {

	var self = this;
	self.groups = ko.observableArray([]);

	function Group(id, name) {

	var self = this;
	self.id = id;
	self.name = name;

	self.openState = ko.observable({focussed: false, shouldOpen: false});

	self.items = ko.observableArray([]);

	self.toggle = function (group, event) {
	var shouldOpen = group.openState().shouldOpen;
	self.openState({focussed: true, shouldOpen: !shouldOpen});
	}
	}

	function Item(id, name) {
	var self = this;
	self.id = id;
	self.name = name;
	}

	var g1 = new Group(1, "Group 1");
	var g2 = new Group(2, "Group 2");
	var g3 = new Group(3, "Group 3");

	g1.items.push(new Item(1, "Item 1"));
	g1.items.push(new Item(2, "Item 2"));

	g2.items.push(new Item(3, "Item 3"));
	g2.items.push(new Item(4, "Item 4"));
	g2.items.push(new Item(5, "Item 5"));

	g3.items.push(new Item(6, "Item 6"));

	self.groups.push(g1);
	self.groups.push(g2);
	self.groups.push(g3);
	}

	ko.applyBindings(new ViewModel());

	</script>

	</body>
	</html>