Category Toggle

Written by Dion of Dion Designs.

Many people have asked how they can have the categories toggle on/off like they do on this support board. This tutorial shows you how to add the category toggle on phpBB3 and PunBB boards. Invision boards already a built-in category toggle, so this tutorial is not needed on Invision boards. phpBB2 boards are not supported.

To install the category toggle, first go to your Admin Control Panel and select Display > Generalities. Paste the following to the bottom of your Homepage Message and then click Save:

Code:

<script type="text/javascript">
function toggleLTcategory(cat) {
    var cid=cat.id;
    var button=document.getElementById('b'+cid);
    if (cat.style.display=='none') {
        cat.style.display='block';
        button.className='contract';
        my_setcookie('_' + cid, '', true);
    }
    else {
        cat.style.display='none';
        button.className='expand';
        my_setcookie('_' + cid, '1', true);
    }
}

jQuery(function () {
    x=jQuery('.topiclist .header').get();
    for (i=0; i<x.length; i++) {
        x[i].style.position='relative';
        var cid='c'+String(i+1);
        x[i].parentNode.nextSibling.setAttribute('id',cid);
        x[i].parentNode.nextSibling.style.display='block';
        var y='<div id="b'+cid+'" class="contract" onclick="toggleLTcategory(this.parentNode.parentNode.nextSibling);"></div>';
        x[i].innerHTML=x[i].innerHTML+y;
    }

    cookies = documentcookie.split('; ');
    for (i in cookies) {
        if (cookies[i].charAt(0) == '_') {
            cookie = cookies[i].split('=');
            if (cookie[1] == '1') {
                cid = cookie[0].substring(1);
                if (document.getElementById(cid)) {toggleLTcategory(cid);}
            }
        }
    }
});
</script>

The code above is for a phpBB3 board. If you have a PunBB board, find this line in the code:

Code:

x=jQuery('.topiclist .header').get();

and replace it with this:

Code:

x=jQuery('.main-head .page-title').get();

Now go to Colors > CSS Stylesheet. Paste the following to the bottom of your CSS and then click Submit:

Code:

.expand, .contract {position: absolute; top: 6px; right: 10px; cursor: pointer; width: 9px; height: 9px; background: url(http://illiweb.com/fa/m/tabs_more1.gif);}
.contract {background: url(http://illiweb.com/fa/m/tabs_less1.gif);}

Depending on the size of your category title bars, you may need to slightly adjust the top: value in the first line of CSS above.

You're done! You will now have the same clickable ± category toggle buttons that you see here on the support board.