讓blogger側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling)

1. 將下面的javascript貼在</head>的前面：

<!-- Sidebar Toggle Element -->
<script type='text/javascript'>
<!-- Function used for Sidebar Element Toggling: ElementToggle()-->
function ElementToggle(id) {
var element = document.getElementById(id).getElementsByTagName('div');
for(i = 0; i < element.length; i++) {
attribute = element[i].getAttribute('id');
if(attribute == 'toggle')
{
if (element[i].style.display == 'none')
element[i].style.display = '';
else
element[i].style.display = 'none';
}
}
}
function ElementToggleExpand(id) {
var element = document.getElementById(id).getElementsByTagName('div');
for(i = 0; i < element.length; i++) {
attribute = element[i].getAttribute('id');
if(attribute == 'toggle')
{
element[i].style.display = '';
}
}
}
function ElementToggleCollape(id) {
var element = document.getElementById(id).getElementsByTagName('div');
for(i = 0; i < element.length; i++) {
attribute = element[i].getAttribute('id');
if(attribute == 'toggle')
{
element[i].style.display = 'none';
}
}
}
</script>


2. 去修改每個要開合的網頁元素(page element)，在程式裡面叫做widget(元件)，
下面是以一個HTML/Javascript的網頁元素當例子，紅色部分為加入的內容(其中style的float和margin請依自己版面調整位置)：

<b:widget id='HTML1' locked='false' title='HTML/Javascript' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/> <a href='javascript:void(0);' onclick='javascript:ElementToggle("HTML1");' style='float:right;margin:-17px 0px;'>[+/-]</a> </h2>
</b:if>
<div class='widget-content' id='toggle' style='display:none;'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

其中這段style='display:none;'就是控制元件預設展開或收合的地方，如果預設想要收合就加上這段語法，若想顯示則把這段語法拿掉。

3. 最後是加上一個可以同時展開或合上全部元件的功能，
在樣本中適當的位置加入以下程式碼(紅色部分是元件的id，請改為你所要開合的元件id，另外style部分也請自己改為適合自己的樣版位置)：

<!-- Toggle ALL sidebar elements -->
<div style='float:left; margin:-20px 0px 0px 0px;'>
⊕開合下方全部欄位
<a href='javascript:void(0);' onclick='javascript: ElementToggleExpand("HTML8"); ElementToggleExpand("BlogArchive2"); ElementToggleExpand("LinkList1"); '>[＋]</a>

<a href='javascript:void(0);' onclick='javascript: ElementToggleCollape("HTML8"); ElementToggleCollape("BlogArchive2"); ElementToggleCollape("LinkList1"); '>[－]</a>
</div>




Abin's Tech Note: 讓側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling)