Как программно открыть панель содержимого jQuery

Я хочу расширить поведение по умолчанию для jQuery-аккордеона и добавить кнопку NEXT внутри панелей контента. Когда пользователь нажимает кнопку NEXT внутри панели содержимого, аккордеон должен открыть следующий элемент.

Мне удалось найти следующий элемент, подобный этому $(this).parent().next(), но имеющий проблемы с запуском действительного действия.

<div id="accordion">
   <h3><a href="#">Item 1</a></h3>
   <div>Item 1 content<br />
      <div onclick="$(this).parent().next().show();">NEXT</div>
   </div>
   <h3><a href="#">Item 2</a></h3>
   <div>Item 2 content<br />
   </div>
</div>

Ответы

Ответ 1

Если это виджет jQuery UI Accordion, вы должны использовать его встроенные методы.

var $accordion = $("#accordion").accordion();
function openNextAccordionPanel() {
    var current = $accordion.accordion("option","active"),
        maximum = $accordion.find("h3").length,
        next = current+1 === maximum ? 0 : current+1;
    // $accordion.accordion("activate",next); // pre jQuery UI 1.10
    $accordion.accordion("option","active",next);
}

HTML:

<div onclick="openNextAccordionPanel();">NEXT</div>

Ответ 2

Чтобы код работал отлично, вы должны изменить свой html следующим образом

<div id="accordion">
   <h3><a href="#">Item 1</a></h3>
   <div class='showable'>Item 1 content<br />
      <div onclick="$(this).parent('.showable').hide().next().show();">NEXT</div>
   </div>
   <h3><a href="#">Item 2</a></h3>
   <div class='showable'>Item 2 content<br />
   </div>
</div>

Ответ 3

У моего аккордеона есть только один контент div (индекс 0), а при обратной передаче я регистрирую script, чтобы снова открыть аккордеон после его отдыха ($ ( "# accordion" ). accordion ({collapsible: true, active: true}); $( "# accordion" ). show();), чтобы расположить макет, где пользователь перед тем, как запустить обратную передачу.

HTML:

<div id="accordion" style="display: none">
    <h3>ACCORDION TITLE</h3>
    <div class="col-lg-12" style="overflow: hidden">

Функция Javascript:

 $("#accordion").accordion({ active: 0 });

 $('.ui-accordion-content').css('height', 'auto');