Question

I wanted a lightweight solution so i found this one, however it only expands on clicking plus sign “+” next to the name of expandable category. I replaced + for red square and – for blue square for this demonstration to work.
Live code at: http://jsfiddle.net/2VXuk/2/

I need help modifying it to make any sub level that is expandable to be category that’s not a link and upon clicking on its name expand its content.

Would be great to have option to make it a category – expand on click or link expand on + click and redirect on name click.
e.g.

<ul id="sitemap">
<li><a class="category" href="#">expands only</a> 
    <ul>
        <li><a href="#">Sample</a></li>
        <li><a href="#">Sample</a></li>
        <li><a class="category_and_link" href="psy.html">Link to page or expand on + button</a>
            <ul>
                <li><a href="#">Sample</a></li>
                <li><a href="#">Sample</a></li>
                <li><a href="#">Sample</a></li>
                <li><a href="#">Sample</a></li>
                <li><a href="#">Sample</a></li>
            </ul>                           
        </li>
        <li><a href="#">Fourth link</a></li>
        <li><a href="#">Fifth link</a></li>
    </ul>                   
</li>
</ul>

<script type="text/javascript">
this.sitemapstyler = function(){
    var sitemap = document.getElementById("sitemap")
    if(sitemap){

        this.listItem = function(li){
            if(li.getElementsByTagName("ul").length > 0){
                var ul = li.getElementsByTagName("ul")[0];
                ul.style.display = "none";
                var span = document.createElement("span");
                span.className = "collapsed";
                span.onclick = function(){
                    ul.style.display = (ul.style.display == "none") ? "block" : "none";
                    this.className = (ul.style.display == "none") ? "collapsed" : "expanded";
                };
                li.appendChild(span);
            };
        };

        var items = sitemap.getElementsByTagName("li");
        for(var i=0;i<items.length;i++){
            listItem(items[i]);
        };

    };  
};

window.onload = sitemapstyler;
</script>

Answer 1

See my fork of your jsFiddle. The basic idea is to grab the a element…

var a = li.getElementsByTagName("a")[0];

and add an event handler to it as well.

if (!a.hasAttribute("href"))
    a.onclick = showHide;

For non-links, just leave out the href attribute.