Collapsible categories

Hi guys, 
I want collapsible categories for my forum and I used this javascript code for it.
It works but only by the last category. I dont know if I have to edit the code or have to do something else. I hope you guys will know the answer (:

Code:


$(function () {
    var b = $(".secondarytitle").get();
    for (i = 0; i < b.length; i++) {
        var a = b[i].parentNode.parentNode.childNodes;
        $(b[i].parentNode).click(function () {
            for (i = 1; i < a.length; i++) "none" == a[i].style.display ? a[i].style.display = "" : a[i].style.display = "none", my_setcookie(window.location.host + "_forums", a[1].style.display, !1)
        });
        if (my_getcookie(window.location.host + "_forums")) for (i = 1; i < a.length; i++) a[i].style.display = my_getcookie(window.location.host + "_forums")
    }
});

Hello Lizlee,

See if this code works :
Administration Panel > Modules > Javascript codes managment

Placement : in the homepage

Code:


    $(function(){
            $('#content-container .secondarytitle').parent().append('<span class="toggles"><img src="http://i57.servimg.com/u/f57/18/10/12/74/cat_mi10.png"/></span>');
            var heads = $('#content-container .secondarytitle').parent();
            for(var i=0;i<heads.length;i++){
            $(heads[i]).attr({
            id:'cat'+i,
            class: 'parent'
            });
            }
            var cookie = ReadCookie('catTog').split(',');
            for(var j=0;j<cookie.length;j++){
            $(cookie[j]).nextAll('tr').css('display','none');
            $(cookie[j]).find('.toggles').children('img').attr('src','http://i57.servimg.com/u/f57/18/10/12/74/cat_ma10.png');
            }
            $('.toggles').on('click',function() {
            var g = $(this).closest('.parent').nextAll('tr').css('display');
            cookieList = ReadCookie('catTog');
            if(g == "table-row") {
            var cid= $(this).closest('.parent').attr('id');
            $(this).closest('.parent').nextAll('tr').hide();
            SetCookie("catTog",cookieList+",#"+cid,1000);
            $(this).children('img').attr('src','http://i57.servimg.com/u/f57/18/10/12/74/cat_ma10.png');
            } else {
            KillCookie("catTog");
            var newCookie=[],
            a= $('.parent').nextAll('tr').filter(":hidden"),
            c = $.map(a,function(n,i){
            return "#"+$(a).closest('.parent').attr('id');
            });
            newCookie= c.join(',');
                SetCookie('catTog',newCookie, 100);
            $(this).children('img').attr('src','http://i57.servimg.com/u/f57/18/10/12/74/cat_mi10.png').parent().parent().parent().children('tr').not(":eq(0)").show();
            }
            });
            });
            function SetCookie(cookieName,cookieValue,nDays) {
            var today = new Date();
            var expire = new Date();
            if (nDays===null || nDays===0) nDays=1;
            expire.setTime(today.getTime() + 3600000*24*nDays);
            document.cookie = cookieName+"="+escape(cookieValue)+ ";expires="+expire.toGMTString();
            }
            function ReadCookie(cookieName) {
            var theCookie=""+document.cookie;
            var ind=theCookie.indexOf(cookieName+"=");
            if (ind===-1 || cookieName==="") return "";
            var ind1=theCookie.indexOf(";",ind);
            if (ind1==-1) ind1=theCookie.length;
            return unescape(theCookie.substring(ind+cookieName.length+1,ind1));
            }
            function KillCookie(cookieName){SetCookie(cookieName,"",-1);}


Then add this CSS :
Display > Colors > CSS stylesheet

Code:

   .toggles {
        position: absolute;
        right: 15px;
        top: 9px;
    }

Well, it works but not exactly how I wanted it to because right now there are these images at the corners of my categories where you have to click at so it will collapse. But I want that if a click at any place of the category that it will collapse (not the forums underneath it, only the category)

Hope you understand what I mean

https://i.servimg.com/u/f57/18/10/12/74/cat_ma10.png
https://i.servimg.com/u/f57/18/10/12/74/cat_mi10.png