Код:
это мы добавляем к каждой категории свою иконку (в примере их 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
баловство всё это конечно, но забавно
