<script language="javascript">

var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) { if (ie4) { return document.all[id]; } else {
return document.getElementById(id); } }
function toggle(link, divId) { var lText = link.innerHTML; var d =
getObject(divId);
if (lText == '+') { link.innerHTML = '-'; d.style.display = 'block'; }
else { link.innerHTML = '+'; d.style.display = 'none'; } }


</script>

<style type="text/css">

.expandtitle{
background-color: #999;
color:#000;
padding-left:5px;
width: 300px;
}

.expandcontent{
background-color: #ccc;
color: #000;
width: 300px;
}

</style>

<div class="expandtitle" >
<table border="0" cellspacing="0" cellpadding="2" width="100%">

<tr>
<td> Title widget (tiêu đề của widget) </td>

<td align="right">
[<a title="show/hide" id="expand_link" href="javascript:
void(0);" onclick="toggle(this, 'expand');">&#8722;</a>]
</td>

</tr>

</table>
</div>


<div id="expand" style="padding: 3px;" class="expandcontent" >

{YOUR WIDGET CONTENT} (nội dung của widget)

</div>

<script language="javascript">toggle(getObject('expand_link'),
'expand');</script>