Невозможно заставить следующую и предыдущую кнопки работать на аккордеоне jqueryui

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

Это мой FIDDLE

 <div id="accordion">
<div class="wrap">
     <h3><a href="#">Header 1</a></h3>

    <div>Collapsible content 1</div>
</div>
<!-- end wrap -->
<div class="wrap">
     <h3><a href="#">Header 2</a></h3>

    <div>Collapsible content 2</div>
</div>
<!-- end wrap -->
<div class="wrap">
     <h3><a href="#">Header 3</a></h3>

    <div>Collapsible content 3</div>
</div>
<!-- end wrap -->
<button class='previous'>Previous</button>
<button class='next'>Next</button>


 $(window).load(function () {
$(function () {
    $("#accordion").accordion({
        header: '> div.wrap >h3'
    });
});
});

 $(".wrap").click(function () {
//$(this).prependTo("#ImportantNumbers");
$(this).hide().prependTo("#accordion").slideDown();
 });

jquery jquery-ui-accordion
person San    schedule 27.11.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

http://jsfiddle.net/wq3pu8t9/1/

$('.next').click(function () {

    var $a = $("#accordion");
    //Which panel is currently  active
    var $cur = $('.ui-state-active').parents('.wrap');
    //get number of panels
    var len = $('.wrap').size();

    //get index of active panel
    var ind = $a.accordion("option", "active")
    //index increases by one,         
    ind++;
    //the index of the panel that will become active
    //if the index is greater than the maximum index
    //index is set to zero, panel
    if (ind > len - 1) ind = 0;

    //currently active panel placed on the bottom
    $cur.appendTo("#accordion");
    //next panel becomes active
    $a.accordion("option", "active", ind);

})

$('.previous').click(function () {

    var $a = $("#accordion");
    var $cur = $('.ui-state-active').parents('.wrap');
    var len = $('.wrap').size();

    var ind = $a.accordion("option", "active")
    ind--;
    if (ind < 0) ind = len - 1;

    $('.wrap').last().prependTo("#accordion");

    $a.accordion("option", "active", ind);

})
person dm4web    schedule 28.11.2014
comment
большое спасибо, чувак ... я пытался сделать это навсегда. Единственная проблема в том, что мне нужна кнопка закрытия, которая сворачивает весь раздел. Еще раз спасибо - person San; 28.11.2014
comment
не могли бы вы помочь мне, как закрыть и расширить раздел, чтобы закрыть. я пробовал с $(document).ready(function() { // принудительно теряет фокус при закрытии секции аккордеона. IE и FF. function crushAll() { alert(callcolllallAll); $(#accordion) .filter(:has (.ui-state-active)) .accordion(activate, -1); $(.ui-accordion-header).blur(); } }) но это не работает - person San; 01.12.2014

arrow_upward
1
arrow_downward

Вот: http://jsfiddle.net/aravi_vel/du7ocqom/1/

Используйте метод «option:active», чтобы определить текущую активную панель. Используйте то же самое, чтобы установить новую активную панель.

$accordion.accordion("option","active");
$accordion.accordion("option","active",next);

Использована помощь из этого ответа: https://stackoverflow.com/a/11041496/976777

person Aravind Vel    schedule 28.11.2014