Помогите разобраться с jquery.collapse.js
 

Сначала начну с того, что нужно получить.
Есть форум http://motobratva.com/index.php где категории сворачиваются/разворачиваются при нажатии на кнопки, состояние запоминается.
Код самописный, анимация сделана через slideUp/slideDown/animate, возможно поэтому не очень плавная.

Нашел библиотеку jquery.collapse.js,
Примеры здесь http://webcloud.se/jQuery-Collapse/
Описание здесьhttps://github.com/danielstocks/jQue...979a/README.md
У человека http://www.dmzx-web.net/ на более ранней версии библиотеки, похоже по этому примеру http://www.ppkbb3cker.ru/viewtopic.php?f=56&t=2308 все работает плавно и красиво.
но, я никак не могу разобраться с работой этой библиотеки и вызовами.
Хочу получить то же, что и сейчас, но на базе библиотеки jquery.collapse.js с плавной анимацией.


все эксперименты проводятся на тестовом сайте, ссылку могу предоставить, но его надо подключать через hosts

что пробовал...
подключил библиотеки и следующим кодом завернул разделы forabg в общий блок forumlist

$('.forabg').wrapAll('<div class="forumlist" data-collapse/>');

скрипт добавил свои данные в структуру

<div class="forumlist" data-collapse="">
<div class="forabg" data-collapse-summary="" aria-expanded="false">
<div class="forabg" style="display: none;" aria-hidden="true">
<div class="forabg" data-collapse-summary="" aria-expanded="false">
</div>

заголовки у меня стали кликабельны, но почему-то всегда сворачивается второй раздел при клике на первый.
на этом застрял

далее нужно будет прикрутить вызов коллапса с кнопок, но пока я застрял в самом начале ((

помогите пожалуйста разобраться.
что-то сам никак, туплю.

поставил другую версию библиотеки

* Collapse plugin for jQuery
* http://github.com/danielstocks/jQuery-Collapse/
*
* @author Daniel Stocks (http://webcloud.se)
* @version 0.9.1

с таким кодом заработало

(function ($) {  

	$('.forabg').wrapAll('<div class="forumlist"/>');

	$('.topiclist.forums').before('<div class="trigger active"></div>').wrap('<div class="collapsethis" />');





 $(".forumlist").collapse({show: function(){
this.animate({
opacity: '1.0',
height: 'toggle'
}, 300);
},
hide : function() {
this.animate({
opacity: '0.3',
height: 'toggle'
}, 300);
}
});


})(jQuery);

как заставить работать с версией 1.1.0?

alecto,
а смысл менять одно на другое если вас только плавность неустраивает
ставите jquery-ui выбираите нужную плавность http://api.jqueryui.com/easings/
и получите тотже эффект и может лучше
http://jsbin.com/kiyemetezu/1/

в принципе разобрался, на старой версии библиотеки построил. на новой - почему-то не работает.

рони, речь идет не о скорости анимации, с ней все понятно.
я имею ввиду плавность анимации.
она не сравнима. почему - не знаю.

рони, если вы успели пробовать, как было... залил на основу, попробуйте как стало работать http://motobratva.com/index.php - небо и земля.

единственный вопрос - как заставить работать в новой версии библиотеки.

alecto,
чтобы заменить slideUp(500) на animate({height: 'toggle'}) вы тащите устаревший плагин к себе на форум?

вы смотрели вариант по ссылке в 3 посте? если не устроил более ничем помочь не могу

уже засыпаю, не заметил ссылок.
наверно вы правы. можно поиграться с замедлениями.
что нужно менять для варианта .slideUp(100), чтобы получить замедления?

alecto,
добавлено после jquery.min
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
и измененён только этот блок

// отрабатываем клики показать/скрыть категорию
	$('.collapsetrigger').click(function() {
	    var showhidden_triger_this = $(this).next().attr('aria-hidden');
	    if (showhidden_triger_this == "false") {
	        $(this).next().attr('aria-hidden', 'true').slideUp(800, 'easeOutQuart', function() {
	            $(this).parents('div.forabg').animate({
	                opacity: '0.4'
	            }, 500)
	        });
	        $(this).removeClass(active).addClass(inactive);
	    } else {
	        $(this).parents('div.forabg').animate({
	            opacity: '1.0'
	        }, 300, function() {
	            $('.collapsetrigger', this).next().attr('aria-hidden', 'false').slideDown(1500, 'easeOutQuad')
	        })

	        $(this).removeClass(inactive).addClass(active);
	    }
	    localStorage.setItem($(this).attr('cat'), showhidden_triger_this); // сохраняем

	});

обратно не хочет разворачиваться.