Ẩn/Hiện tab nội dung (Version 2)

[FD's BlOg] - Đây là một thủ thuật cải tiến từ thủ thuật "Tạo tiện ích đóng mở tab nội dung" (thực hiện online trên website flooble.com). Bài viết này sẽ thực hiện lại thủ thuật đó trực tiếp trên blog của bạn mà không cần thông qua web trung gian.

Xem demo trực tiếp ở đây : http://fandung.110mb.com/test/hide-show-tabcontent.html

Hình minh họa

☼ Bắt đầu thực hiện thủ thuật:
1. Đăng nhập blog
2. Vào bố cục (Layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Chèn đọan code bên dưới vào trước thẻ đóng </head>

<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>

- Thay đổi độ rộng (width: 300px;) cho phù hợp với sidebar của bạn.

5. Save template.
6. Tạo widget HTML/Javascript và dán code HTML bên dưới vào:

<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>

Chúc các bạn thành công.