Creating Collapsible Lists

Collapsible Lists are an easy way to show the contents of your blog in a very compact and detailed way.
I had searched the net intensively to create a Collapsible list. I was successful in finding the information regarding the creation of the 'Collapsible List' and have used it in many of my blogs.

I am hereby writing this post to help the bloggers create a 'Collapsible List'

1>Obtain the Labels of your Blog: Copy the Labels from your sidebar onto the notepad
2>Classify the Labels: Classify your labels and put them under respective categories
For eg:
Appetizers
->Gobi Manchurian
->Baby Corn Manchurian

Here,the label Appetizers has 2 child nodes i.e Gobi Manchurian and Baby Corn Manchurian

3>Follow this step for creating Collapsible List
->Go to Layout Tab->Page elements tab-> Add a Gadget -> Choose Html/Javascript Gadget
->Copy  this entire code(In Red) and paste it inside the HTML/Javascript Gadget you just chose.


<style type="text/css">
.dtree {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 15px;
width:280px;
color: #000;
white-space: nowrap;
}
.dtree img {
border: 0px;
vertical-align: middle;
}
.dtree a {
color: #333;
text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
white-space: nowrap;
padding: 1px 2px 1px 2px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
color: #333;
text-decoration: underline;
}
.dtree a.nodeSel {
background-color: #c0d2ec;
}
.dtree .clip {
overflow: hidden;
}


</style>
<div class="dtree">
<script type="text/javascript">

<!--
d = new dTree('d');


->Now add the parent nodes and child nodes after the code you have just pasted:


d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','example01.html');
d.add(2,0,'Node 2','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(4,1,'Node 1.2','example01.html');
document.write(d);

//-->
</script>
</div>
Save and Close the Gadget box



Here,in my example,my code would be:

d.add(0,-1,'Recipe Index');

d.add(1,0,'Appetizers');

d.add(2,0,'Cakes and Patries');
d.add(3,0,'Chats');

d.add(10,1,'Gobi Manchurian','my gobi's.html link'); --- Here 1 is the parent node 'Appetizer' and (10,1) is a child node 'Gobi Manchurian' under parent node 'Appetizer'.. number 10 is just a number here

d.add(11,1,'Baby Corn Manchurian','my baby corn manchu's.html link');---Here 1 is the parent node 'Appetizer' and (11,1) is a child node 'Baby Corn Manchurian' under parent node 'Appetizer'.. number 11 is just a number here

d.add(20,2,'Eggless chocolate cake','my eggless cake's.html link');---Here 2 is the parent node 'Cakes and Patries' and (20,2) is a child node 'Eggless Chocolate Cake' under parent node 'Cakes and Pastries'.. number 20 is just a number here

->Now go to Layout->Edit Html->
Paste this code <script src='http://simblogg.googlepages.com/dtree.js' type='text/javascript'/>
immediately before this tag: <b:skin><![CDATA[/*

Blogger Templates