Объединение нескольких блоков в аккордеон

[robertkein]

Прошу помощи у людей, разбирающихся в javascript, jquery.
Есть тема для Wordpress, в этой теме создан отдельный сайдбар в котором планируется раземщение 4-х таймеров обратного отсчета на jquery, причем три из четырех таймеров не должны быть видны при загрузке страницы.

Вот кусок кода страницы, в котором выводится корректно 4 открытых таймера и сайдбар:

<div class="sidebar acc">
 <div id="accordion">
 <div id="shailan-countdown-widget-3" class="widget shailan_CountdownWidget">
 <div class="topacc">Настоящая кровь</div>
 <div id="wborder"></div>
 <div class="wtbodyacc">
 <div id="shailan-countdown-3_1" class="shailan-countdown-3 countdown" ></div>
<script type="text/javascript">
<!--//
// Dom Ready
	jQuery(document).ready(function($) {
		var event_month = 05 - 1;
		desc = '5 сезон';
		eventDate = new Date(2012, event_month, 06, 18, 21, 36, 0);
 		$('#shailan-countdown-3_1').countdown({
			until: eventDate,
			description: desc,
 			format: 'yowdHMS',
 			timezone: 0		});
	});
//-->
</script>
 </div>
 </div>
 <div id="shailan-countdown-widget-4" class="widget shailan_CountdownWidget">
 <div class="topacc">Дневники вампира</div>
 <div id="wborder"></div>
 <div class="wtbodyacc">
 <div id="shailan-countdown-4_2" class="shailan-countdown-4 countdown" ></div>
 <script type="text/javascript">
 //Таймер 2
 </script>
 </div>
 </div>
 <div id="shailan-countdown-widget-5" class="widget shailan_CountdownWidget">
 <div class="topacc">Тайный круг</div>
 <div id="wborder"></div>
 <div class="wtbodyacc">
 <div id="shailan-countdown-5_3" class="shailan-countdown-5 countdown" ></div>
 <script type="text/javascript">
  //Таймер 3
 </script>
 </div></div>

 <div id="shailan-countdown-widget-6" class="widget shailan_CountdownWidget">
 <div class="topacc">Игра престолов</div>
 <div id="wborder"></div>
 <div class="wtbodyacc">
 <div id="shailan-countdown-6_4" class="shailan-countdown-6 countdown" ></div>
 <script type="text/javascript">
  //Таймер 4
 </script>
 </div>
 </div>
</div>
</div>

А вот и код accordion.js, который я пытаюсь использовать для создания визуального эффекта:

// Когда страница полностью загружена
 jQuery(window).ready(function()
{
	// запоминаем высоту и отступы каждого блока
	 jQuery('#accordion > .wtbodyacc').each(function()
	{
		 jQuery(this).data('height',  jQuery(this).height());
		 jQuery(this).data('padding-top',  jQuery(this).css('padding-top'));
		 jQuery(this).data('padding-bottom',  jQuery(this).css('padding-bottom'));
	});
	
	// Скрываем все секции кроме первой
	 jQuery('#accordion > .wtbodyacc:not(:first)').hide();
	// Делаем первую секцию активной
	 jQuery('#accordion .topacc:first, #accordion .wtbodyacc:first').addClass('active');
	// Если пользователь кликнул на секцию
	 jQuery('#accordion > .topacc').click(function()
	{
		// Сбрасываем все секции
		 jQuery('#accordion > .topacc').removeClass('active');
		 jQuery('#accordion > .wtbodyacc:visible').animate({height: 0, 'padding-top': 0, 'padding-bottom': 0}, 500, function() {  jQuery(this).hide() });
		
		// Делаем активной на которую кликнули
		 jQuery(this).addClass('active');
		box = jQuery(this).find('.wtbodyacc').addClass('active');
		 jQuery(box).animate(
		{
			height:  jQuery(box).data('height'),
			'padding-top':  jQuery(box).data('padding-top'),
			'padding-bottom':  jQuery(box).data('padding-bottom')
		}, 500);
	});
});

Прошу помощи понимающих в этом деле. Заранее балгодарен.