Catagories in the Sidebar

Solved, but the solution is fairly complicated and messy.
If you are interested in just expanding your posts I suggest reading this post as it provides an interesting solution

• Problem
  
  After looking for a widget that enables Catagories in the Sidebar, i.e. Coding, Games, etc, I have yet to find something that suits my needs.
  It is possible to use labels to catagorise my posts but this is not exactly what I'm looking for.
  What I would like is something like the Blog Archive widget. I would manually edit the script adding posts under their respective catagories.
  For instance
  
  Personal
  Personal post
  Coding
  PHP
  php post
  Reviews
  Game review
  
  As with the archive arrows would exist to hide/show the subsections.
  
  I think I will keep looking, although another options would be to code it myself using a show/hide javascript. That could be the solution, the problem being that at the moment I don't know how to do that...
  
• Solution
  
  The Solution to this problem is pretty complicated although useful once it works.
  
  There are 4 components to implementing this:
  1. Javascript code
  2. CSS code
  3. HTML code
  4. minus and plus images
  
  The Javascript code is based on the MarkTree script. I removed all the parts which were not needed to give the following code:
  
  • Javascript Code
    var lastnode=null;
    var listnodes = null;
    
    function is_exp(n) {
    if (n==null) return false;
    return ((n.className=='exp') || (n.className=='exp_active'));
    }
    function is_col(n) {
    if (n==null) return false;
    return ((n.className=='col') || (n.className=='col_active'));
    }
    function is_basic(n) {
    if (n==null) return false;
    return ((n.className=='basic') || (n.className=='basic_active'));
    }
    function is_list_node(n) {
    if (n==null) return false;
    if (n.className==null) return false;
    if ( (is_exp(n)) ||
    (is_col(n)) ||
    (is_basic(n)) )
    return true; else return false;
    }
    function getsub (li) {
    if (li.childNodes.length==0) return null;
    for (var c = 0; c < li.childNodes.length; c++)
    if ( (li.childNodes[c].className == 'sub') || (li.childNodes[c].className == 'subexp') )
    return li.childNodes[c];
    }
    
    function onClickHandler (evt) {
    if (lastnode==null)
    {
    listnodes = document.getElementsByTagName('li');
    lastnode=listnodes;
    temp=listnodes;
    }
    var target = evt ? evt.target : event.srcElement;
    if (!is_list_node(target)) return;
    toggle(target);
    set_lastnode(target);
    }
    function setSubClass(node,name) {
    sub = getsub(node);
    if (sub==null) return;
    sub.className=name;
    }
    function toggle(target) {
    if (!is_list_node(target)) return;
    if (is_col(target)) {
    target.className='exp';
    setSubClass(target,'sub');
    // getsub(target).className='sub';
    }
    else if (is_exp(target)) {
    target.className='col';
    setSubClass(target,'subexp');
    // getsub(target).className='subexp';
    }
    
    }
  
  The CSS code is also based on the MarkTree script. As with the JS code I removed all the parts which were not needed to give the following code:
  
  • CSS Code
    div.basetext {
    margin-top:11px;
    margin-bottom:11px;
    margin-left:1%;
    margin-right:1%;
    padding-top:0px;
    padding-left:20px;
    padding-right:11px;
    padding-bottom:0px;
    text-align:left;
    font-weight:normal;
    }
    
    ul {
    margin-top:1px;
    margin-bottom:1px;
    margin-left:0px;
    padding-left:3%;
    }
    
    li {
    list-style:outside;
    margin-top:5px;
    margin-bottom:2px;
    }
    
    ul li {
    list-style:square;
    font-family:sans-serif;
    font-weight:normal;
    }
    
    li.basic {
    list-style:square;
    list-style-image:none;
    margin-top:2px;
    }
    
    .sub { display: none; }
    .subexp {display: block; }
    .sub { display: none; }
    .subexp {display: block; }
    
    li.exp_active,
    li.exp {
    list-style:square;
    list-style-image:none;
    margin-top:5px;
    cursor:pointer;
    }
    
    li.exp:hover {
    list-style-image:url("plus.png");
    margin-top:5px;
    cursor:pointer;
    background-color:#E4F8F3;
    }
    
    li.col_active,
    li.col {
    list-style:square;
    list-style-image:none;
    margin-top:5px;
    cursor:pointer;
    }
    
    li.col:hover {
    list-style-image:url("minus.png");
    margin-top:5px;
    cursor:pointer;
    background-color:#E4F8F3;
    }
    
    li.basic_active {
    list-style:square;
    list-style-image:none;
    background-color:#E4F8F3;
    margin-top:2px;
  
  The HTML code uses the css classes to determine what to do with the code as can be seen:
  
  • HTML Code
    The code has to start with the following line:
    <div id="base" class="basetext">
    This div class has the main styles attached to it
    
    If you want the first level expanded use the following code:
    <ul>
    <li class="col">Expanded level
    If you want the first level to be collapsed then
    (this also serves as the second level being collapsed if the first is open)
    <ul class="subexp">
    <li class="exp">Collapsed level
    After this use
    <ul class="sub">
    <li class="exp">Hidden level which can be expanded
    Then for the final level use
    <ul class="sub">Next level
    For the final level you can also use
    <ul class="sub">
    <li class="basic">This li class allows bullet points
    
    Then at the end remember to close everything
    </li>
    </ul>
    </div>
    
    Lastly one example to use if you didn't understand above
    
    <div id="base" class="basetext">
    <ul class="subexp">
    <li class="exp">
    <span style="">Test header 1</span>
    <ul class="sub">
    Test Text
    </ul>
    </li>
    <li class="exp">
    <span style="">Test header 2</span>
    <ul class="sub">
    Test Text
    </ul>
    </li>
    </ul>
    </div>
  
  The two images which can be saved straight from this blog need to be hosted somewhere so that the CSS code can refer to them as shown below:
  
  • Image Code
    list-style-image:url("minus.png");
    list-style-image:url("plus.png");
  
  
• Thoughts
  1. I need to figure out how to change my js show/hide code in the post below to be initially hidden.
  Solved Will use a similar code to the sidebar, new todo
  2. I need to figure out how to jump around the post by use of links but I'm pretty sure a bit of js code could easily solve that -- Makes the summary section more useful if you can jump to the relevent section.
  3. Lastly a simple one, figure out how to indent... Solved Use & nbsp; source