Человек IT

Аккордион с минимальным функционалом на jQuery делается всего в несколько строк, нужно только правильно обращаться с селекторами.

Посмотрим что получается?

Имеем такую верстку:

html4strict
<div class="termin_wrapper">
 <a class="terminlink" href="#">Заголовок</a>
	<div class="articlepreview">
 Текст Текст
         </div>
</div>

Этот отрывок верски повторяется несколько раз на странице друг за другом. Из этих отрывков мы и будем делать аккордион.

Давайте взглянем на javascript (jQuery) код:

jquery
jQuery(document).ready(function(){
  $('a.terminlink').click(function() {
    $('div.articlepreview').slideUp('normal');
    $(this).next().slideDown('normal');
    return false;
  });
  $("div.articlepreview").hide();
});

Разберем построчно.

1. Тут любителям jQuery объяснять ничего не нужно.

2. Ставим обработчик на событие клика.

3. Схлопываем все .articlepreview. Но один-то нам надо развернуть... Вот об этом кака раз в следующей строке.

4. Разворачиваем элемент следующий за this. А в данном контексте this у нас как раз тот самый a.terminlink, на который был клик, следовательно развернется нужный нам DIV.

5. Отменяем действия браузера на клик

6. ....

7. Схлопываем ВСЕ элементы аккордиона.

Итак: простейший аккордион на jQuery пишется всего в семь строк!!!

Комменты