Displaying Description in Knockout on clicking Title - css

Question

I have a asp.net mvc2 page where I display data with titles and descriptions using knockout. I want to hide descriptions and show description based on clicked title. any help would be appreciated. Also I would like to apply h1 tag to title.
<div id="dataDiv">
<table style="text-align: left" border="0">
<tbody>
<!-- ko foreach: list -->
<tr>
<td colspan="2" data-bind="text: title">
</td>
</tr>
<tr>
<td colspan="2" data-bind="text: description">
</td>
</tr>
<tr>
<td colspan="2">
<hr style="border-top: 1px dotted #f00; color: #fff; background-color: #fff; height: 1px;
width: 100%;" />
</td>
</tr>
<!-- /ko -->
</tbody>
</table>

Answer 1

Is this is what You are looking for?
Working demo http://jsfiddle.net/Rgxy9/
HTML:
<table style="text-align: left" border="0">
<tbody data-bind="foreach: list">
<tr>
<td colspan="2" data-bind="click: $root.select">
<h1 data-bind="text: title" />
</td>
</tr>
<tr data-bind="visible: $root.selected() == $data">
<td colspan="2" data-bind="text: description">
</td>
</tr>
<tr>
<td colspan="2">
<hr style="border-top: 1px dotted #f00; color: #fff; background-color: #fff; height: 1px;
width: 100%;" />
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var item = function(title, desc) {
this.title = ko.observable(title);
this.description = ko.observable(desc);
};
var vm = function() {
var self = this;
this.list = ko.observableArray([new item('some', 'desc'),
new item('som2', 'desc2')]);
this.selected = ko.observable();
this.select = function(item) {
self.selected(item);
};
};
ko.applyBindings(new vm());
</script>