Expand collapse label widget

This is my first widget on the way i'm learning about blogger.
I don't like original label widget of blogger because :
- it's load all posts related to (slow to browse).
- hard to browse all if there're too many posts of a label.

As you see the label widget on this blog, when a label name is clicked, a table of content (TOC) is display above post region. The TOC author is Hans , you can visit his site and try implement the original TOC if you like.

At first, your blog must already has a label widget. If not, just add one ;).
There are three easy steps to get one label widget. Here you are :
1. In Layout tab of your blog administration region, choose "Edit HTML". After "Expand Widget Templates", press Ctrl-F and type "Label1" to look up your label widget code ( or find it by any way you want ;) ).
You found code like this :

Replace code above with this (click to get code )
Ok, step one finished .

2. Now, press Ctrl-F and lookup "type='Blog'". You found it?
Ya, nothing to do with this line, Let take a look at the line above it.
section class='main' id='main' showaddelement='yes'
change showaddelement to 'yes'.
Save your work.
Ok, step two finished.

3. Choose "Page Elements"
You can add Page element in the same column with Blog Posts now. ;). Ok, click to add one.
In the popup, choose type of widget is "HTML & JavaScript", click "Add to Blog".
You see a new popup appear. Ya. Now add this code (click to get code) to Content, title just left blank.
Click "Save Changes".
step three finished.

Just view your blog and enjoy the widget.
Happy harvest exp.
Moongy.