Hey guys this is going to be a category toggle for you forum page. This will make it so when a users clicks the target area its contents will shrink. I have this for punbb and phpbb2, I made a few different codes to work with every different persons taste. This code is quite simple so I am giving it a difficulty level of 2 stars. 
  Make sure you select your forum type and which type of toggle you would like. There is multiple ways so check each of them out if you want to.

 [hc = PunBB Click Head]

Code:

$('.main-head').click(function() {
var g = $(this).next('.main-content').css('display');
if(g == "block") {
 $(this).next('.main-content').slideUp();
} else {
 $(this).next('.main-content').slideDown();
}
});

[/hc]


[hc = PunBB Click Button]

Code:

$('.main-head').append('<span class="toggles"><img src="http://2img.net/i/fa/m/tabs_less1.gif"/></span>');
$('.toggles').on('click',function() {
var g = $(this).parent().next('.main-content').css('display');
if(g == "block") {
 $(this).children('img').attr('src','http://2img.net/i/fa/subsilver/tabs_more.gif').parent().parent().next('.main-content').slideUp();
} else {
 $(this).children('img').attr('src','http://2img.net/i/fa/m/tabs_less1.gif').parent().parent().next('.main-content').slideDown();
}
});

CSS TO ADD:

Code:

.main-head{
position:relative;
}
.toggles {
position: absolute;
right: 5px;
top: 5px;
}

[/hc]


[hc = PhpBB2 Click Head]
 

Code:

$('.secondarytitle').parent().addClass('toggles');
$('.toggles').on('click',function() {
var g = $(this).next('tr').css('display');
if(g == "table-row") {
 $(this).parent().children('tr').not(":eq(0)").slideUp();
} else {
 $(this).parent().children('tr').not(":eq(0)").slideDown();
}
});

[/hc]

[hc = PhpBB2 Image Click]

Code:

$('.secondarytitle').parent().append('<span class="toggles"><img src="http://2img.net/i/fa/m/tabs_less1.gif"/></span>');
$('.toggles').on('click',function() {
var g = $(this).parent().next('tr').css('display');
if(g == "table-row") {
$(this).children('img').attr('src','http://2img.net/i/fa/subsilver/tabs_more.gif').parent().parent().parent().children('tr').not(":eq(0)").slideUp();
} else {
$(this).children('img').attr('src','http://2img.net/i/fa/m/tabs_less1.gif').parent().parent().parent().children('tr').not(":eq(0)").slideDown();
}
});

CSS to Add:

Code:

.toggles {
position: absolute;
right: 5px;
top: 5px;
}
.forumline {
position:relative;
}

[/hc]