<script type="text/javascript">

function toggle(clazz)
{
var count = 0;
var hide = false;
dojo.query("."+clazz).forEach(function(node) {
console.log(node);
if (node.style.display == "inline-block") {
node.style.display = "none";
document.getElementById("toggleBtn").innerHTML = "+";
hide = true;
} else {
node.style.display = "inline-block";
document.getElementById("toggleBtn").innerHTML = "-";
}
count++;
});
if (hide) {
document.getElementById("plus").colSpan = "" + (parseInt(document.getElementById("plus").colSpan) - count);
} else {
document.getElementById("plus").colSpan = "" + (parseInt(document.getElementById("plus").colSpan) + count);
}
}
</script>

<table border="1">
<thead>
<tr>
<td> </td>
<td id="plus" colspan="4"><span id="toggleBtn" style="cursor: pointer" onclick="toggle('hideBlock')">-</span></td>
</tr>
<tr>
<td>First col</td>
<td class="hideBlock">Sec col</td>
<td class="hideBlock">third col</td>
<td class="hideBlock">forth col</td>
<td>fifth col</td>
</tr>
</thead>

<tr>
<td>First col</td>
<td class="hideBlock">Sec col</td>
<td class="hideBlock">third col</td>
<td class="hideBlock">forth col</td>
<td>fifth col</td>
</tr>
<tr>
<td>First col</td>
<td class="hideBlock">Sec col</td>
<td class="hideBlock">third col</td>
<td class="hideBlock">forth col</td>
<td>fifth col</td>
</tr>
</table>