[CB] Category Collapse (Admin editable)

[Todge]

This will make selected categories collapsible, and is editable from the Admin Panel..

Updated to remember the status of each category, so collapsed cats will still be collapsed on return etc..

Before...



After...



To make a category collapsible, go to your Admin Panel >> Modify Category.. Choose the category, then you will see the normal category modifying screen, but now it should have an extra option to make the category collapsible...



Simply choose from the drop-down and modify..

Thanks to Ambo100 for the images.

Put it at or near the top of your Main Footer..

<script type="text/javascript">
<!--
/*
Collapse categories (Admin editable)
By Todge
Copyright © 2007
Please keep this header intact
*/

// Edit below...

var hideMessage = " - Click to hide this forum";
var showMessage = " - Click to show this forum";
var newMessage = "<font color=000000> There are new messages in this forum</font>";

// Edit above...

var newMes = 0;

// Set cookie function..
function setCookie(cookieName,cookieValue)
{
var expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+6);
if(cookieValue == 'new')
{
document.cookie = cookieName+'=none; expires='+expireDate.toGMTString()+'; path=/';
return;
}
var cValue = document.cookie;
cValue = cValue.split(new RegExp(' '+cookieName+'='))[1].split(';')[0];
if(cookieValue == '' && cValue.match(/none/))
{
if(document.all){
cookieValue = 'block';}
else{
cookieValue = '';}
}
else
{
cookieValue = 'none';
}

document.cookie = cookieName+'='+cookieValue+'; expires='+expireDate.toGMTString()+'; path=/';
return;
}

// Collapse or expand category..
function collapseCat(hiddenCat,catName)
{
var collapse = document.cookie;
catName = ' '+catName+'=';
collapse = collapse.split(catName)[1].split(';')[0];

if(collapse == '' || collapse == 'block')
{
hiddenCat.firstChild.innerHTML = hiddenCat.firstChild.innerHTML.split(/<\/font>/i)[0]+'</font><font size="-2">'+hideMessage+'</font>';
}
else if(newMes == 1)
{
hiddenCat.firstChild.innerHTML= hiddenCat.firstChild.innerHTML.split(/<\/font>/i)[0]+'</font><font size="-2">'+newMessage+showMessage+'</font>';
}
else
{
hiddenCat.firstChild.innerHTML = hiddenCat.firstChild.innerHTML.split(/<\/font>/i)[0]+'</font><font size="-2">'+showMessage+'</font>';
}

while(hiddenCat != hiddenCat.parentNode.lastChild && hiddenCat.nextSibling.firstChild.className != 'catbg')
{
hiddenCat = hiddenCat.nextSibling;
hiddenCat.style.display = collapse;
}
return;
}

// Find categories and make them collapsible..
var cat=document.getElementsByTagName('tr');
for(c=0; c<cat.length; c++)
{
if(cat[c].firstChild && cat[c].firstChild.className=='catbg' && cat[c].firstChild.colSpan=='5' && cat[c].firstChild.align!='right')
{
var cc = cat[c].getElementsByTagName('b')[0].innerHTML;
var cName = cat[c].getElementsByTagName('a')[0].name;
var cTest = ' '+cName+'=';

if(cc.match(/ $/))
{
cat[c].style.cursor = 'pointer';
cat[c].onclick = function(){
setCookie(this.getElementsByTagName('a')[0].name,'');
collapseCat(this,this.getElementsByTagName('a')[0].name);}

var board = cat[c].nextSibling;
while(board != board.parentNode.lastChild && board.firstChild.className == 'windowbg')
{
if(board.getElementsByTagName('img')[0].alt == '[/li][li]')
{
newMes = 1;
break;
}
board = board.nextSibling;
}

var pageCookie = document.cookie;
cc = cc.substr(0,cc.length-1);
if(!pageCookie.match(cTest))
{
setCookie(cName,'new');
}

collapseCat(cat[c],cName);
newMes = 0;
}}}

// Add admin functions...
if(location.href.match('action=categorymodify2'))
{
var colTR = document.createElement('TR');
var colTD1 = document.createElement('TD');
var colTD2 = document.createElement('TD');
var colTD3 = document.createElement('TD');

var catForm = document.forms;
for(c=0; c<catForm.length; c++)
{
if(catForm[c].hidden)
{
catForm = catForm[c];
break;
}}

var colName = catForm.name.value;

colTD1.innerHTML = '<font size="-1">Collapse Category:</font>';
if(colName.substr(colName.length-1,1) == ' ')
{
catForm.name.value = colName.slice(0,colName.length-1);
colTD2.innerHTML = '<font size="-1"><select name="collapse"><option value="0">No</option><option value="1" selected="1">Yes</option></select></font>';
}
else
{
colTD2.innerHTML = '<font size="-1"><select name="collapse"><option value="0" selected="1">No</option><option value="1">Yes</option></select></font>';
}
colTD3.innerHTML = '<font size="-2">Selecting "yes" will make this category collapsable.</font>';

colTR.appendChild(colTD1);
colTR.appendChild(colTD2);
colTR.appendChild(colTD3);

var cats = document.getElementsByTagName('tr');
for(t=0; t<cats.length; t++)
{
if(cats[t].innerHTML.match('Limit Access:') && cats[t].firstChild.width == '160')
{
cats[t].parentNode.insertBefore(colTR,cats[t]);
}}

catForm.onsubmit = function(){if(catForm.collapse.value == 1){catForm.name.value += ' ';}}

}
// -->
</script>

Edit these variables to the messages you prefer..

var hideMessage = " - Click to hide this forum";
var showMessage = " - Click to show this forum";
var newMessage = "<font color=000000> There are new messages in this forum</font>";

Updated to take into account conflicting category names

If you want images inside the category bars and are having trouble, take a look at SubDevo's code here.