<img id='img1' onmouseover="this.src='http://funkyimg.com/u2/103/725/011_1.png'" src="http://funkyimg.com/u2/611/217/011.png" onmouseout="this.src='http://funkyimg.com/u2/611/217/011.png'">

<img id='img1' onmouseover="this.src='http://funkyimg.com/u2/103/725/011_1.png'" src="http://funkyimg.com/u2/611/217/011.png" onmouseout="this.src='http://funkyimg.com/u2/611/217/011.png'">

<style type="text/css">
#title-logo-table { height: 345px; width: 846px!important; background: no-repeat left center;
margin: -32px 0 -27px -5px;}
</style>

Сворачивание категорий по нажатию на иконку (© Romych)

как я уже говорил, через иконки к категориям можно организовать сворачивание категорий по клику
присваиваем для иконки каждой нужной нам категории id
например id="showr1", id="showr2" и так далее
пример
это мы добавляем к каждой категории свою иконку (в примере их 3, дублируйте столько сколько категорий у вас, считаются они по порядку сверху вниз)

<script type="text/javascript">
$(document).ready(function(){
$('div#pun-category1.category > h2 > div.catleft ').after('<img id="showr1" class="categor" src="http://icons.iconarchive.com/icons/icons-land/points-of-interest/32/Theater-Yellow-2-icon.png" />');
$('div#pun-category2.category > h2 > div.catleft').after('<img id="showr2" class="categor" src="http://icons.iconarchive.com/icons/rokey/hardware/32/harddisc-icon.png" />');
$('div#pun-category3.category > h2 > div.catleft').after('<img id="showr3" class="categor" src="http://icons.iconarchive.com/icons/deleket/gloss-adobe/32/Adobe-Flash-Player-icon.png" />');
$('img.categor').css({'margin-top' : '-7px', 'margin-left' : '-5px', 'margin-right' : '15px', 'margin-bottom' : '-9px', 'cursor' : 'pointer'});
  });
</script>

а теперь делаем сворачивание разворачивание по клику
оба скрипта ставяться в html-низ :

<script type="text/javascript">
$(document).ready(function(){
$('#showr1').click(function () {
$('div#pun-category1>div.container').show(2000);});
$('#showr2').click(function () {
$('div#pun-category2>div.container').show(2000);});
$('#showr3').click(function () {
$('div#pun-category3>div.container').show(2000);});
$('#showr1').dblclick(function () {
$('div#pun-category1>div.container').hide(2000);});
$('#showr2').dblclick(function () {
$('div#pun-category2>div.container').hide(2000);});
$('#showr3').dblclick(function () {
$('div#pun-category3>div.container').hide(2000);});
});
</script>

в примере три категории, которые вы дублируйте столько, сколько у вас

сворачивание по двойному клику на иконку категории, разворачивание по одиночному,
можно сделать наоборот
и скорость сворачивания можно менять
для каждой категории прописана функция скрыть - hide
и показать - show
баловство всё это конечно, но забавно

пример можно испытать ЗДЕСЬ