исправление аккордеона (JQuery)

Question

HTML

<h2 class="sec-title">one</h2>
<div class="sec-content">content 1</div>
<h2 class="sec-title">two</h2>
<div class="sec-content">content 2</div>

JQuery:

$('.sec-content').hide();
$('.sec-title:first').addClass('active').next().show();

$('.sec-title').click(function(){
 if( $(this).next().is(':hidden') ) { 
  $('.sec-title').removeClass('active').next().slideUp();
  $(this).toggleClass('active').next().slideDown(); 
 }
 return false;
});

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

Спасибо за вашу помощь

Answer 1

Попробуйте изменить строку, в которой вы выбираете первый элемент класса sec-title, следующим образом:

$('.sec-title:eq(1)').addClass('active').next().show();

Вот документация API для селектора :eq.Я думаю, что это будет делать то, что вы хотите.Он выберет n-й элемент, соответствующий селектору.Помните, что eq() основан на 0 - поэтому :eq(1) выбирает второй элемент, который имеет класс sec-title.

Вот моя скрипка, которая иллюстрирует это: http://jsfiddle.net/7KdGn/1/

Iнадеюсь, это поможет!

Answer 2

Вы можете использовать (jQuery UI Accordion] (http://docs.jquery.com/UI/Accordion) вместо того, чтобы заново изобретать колесо. Обратите особое внимание на его активный вариант. Тогда ваш код будет упрощен до

$(document).ready(function() {
    $("#accordion").accordion({ active: 1 });
});​

Посмотрите на пример здесь .