I have implemented a <dl> where the <dd> can be expanded/collapsed by clicking on the corresponding <dt> using knockout's data binding. The inspiration for my solution came from a tutorial on creating custom bindings.
Currently, I have successfully set up everything to toggle the visibility of all elements when clicking on a <dt>. However, my intention was to initially hide all the <dd> elements but I am facing difficulty accomplishing this.
Here is a simplified example illustrating the issue:
HTML:
<dl data-bind="foreach: items">
<dt data-bind="click: toggleDefinition">DT: Lorem ipsum</dt>
<dd data-bind="slideVisible: definitionVisible, slideDuration: 300">DD: dolor sit amet</dd>
</dl>
JavaScript:
ko.bindingHandlers.slideVisible = {
init: function (element, valueAccessor) {
var value = ko.unwrap(valueAccessor());
$(element).toggle(value);
},
update: function (element, valueAccessor, allBindings) {
var value = ko.unwrap(valueAccessor());
var duration = allBindings.get('slideDuration') || 400;
if (value) {
$(element).slideUp(duration);
} else {
$(element).slideDown(duration);
}
}
};
var model = function(){
var self = this;
self.items = ko.observableArray([
new item(),
new item(),
new item()
]);
};
var item = function(){
var self = this;
self.definitionVisible = ko.observable(false);
self.toggleDefinition = function (e)
{
self.definitionVisible(!self.definitionVisible());
};
};
ko.applyBindings(new model());
What I have attempted so far:
Trying to hide the <dd> elements using CSS did not work as expected (no noticeable difference):
dd {
display: none;
}
Setting the property to true partially worked - it hides the <dd> elements but reveals them with an animation which is not desired:
self.definitionVisible = ko.observable(true);
I have also created a working demo on jsfiddle
Do you have any suggestions on what else I could try or change to keep the <dd> elements hidden until a <dt> is clicked?
I am puzzled why the update function gets triggered, making the items visible again. I have been trying to determine the cause, but the call stack provided by knockout does not offer much help.