<div id="panel" class="oj-margin" style="border: 1px solid; max-width: 300px;">
<div id="header" class="oj-flex oj-panel oj-flex-bar">
<div class="oj-flex-start oj-padding-horizontal">Title Bar</div>
<div class="oj-flex-item"></div>
<div class="oj-flex-end oj-panel-alt1">
<i id="min-max-icon" class="fa oj-padding-horizontal hoverable" data-bind="click: collapse,
css: {'fa-chevron-circle-down': collapsed(),
'fa-chevron-circle-up':!collapsed()}"></i>
<i class="hoverable fa fa-close oj-padding-horizontal " data-bind="click: close"></i>
</div>
</div>
<div id="collapsableContent" class="oj-padding">
<h1>{{val}}</h1>
</div>
</div>
// alta css and font-awesome is include through settings
.hoverable:hover {
background-color: rgba(0, 0, 0, 0.3);
}
require(['knockout', 'ojs/ojcore', 'jquery',
'knockout.punches', 'ojs/ojknockout'
], function(ko, oj, $) {
'use strict';
ko.punches.enableAll();
function DemoViewModel() {
var self = this;
self.val = "I'm going to be collapsed, I have some text... ";
self.collapsed = ko.observable(false);
self.collapse = function collapse(event) {
$("#collapsableContent").slideToggle();
self.collapsed(!self.collapsed());
};
self.close = function collapse(event) {
$("#panel").remove();
};
}
$(document).ready(function() {
ko.applyBindings(new DemoViewModel());
});
});
Also see: Tab Triggers