Не може да накара следващия и предишния бутон да работят на jqueryui акордеон

Успях да обвия съдържанието на акордеона в div и също успях да натисна активния раздел в горната част. Но искам външен бутон за предишен, следващ и затварящ акордеон. Опитах няколко опции, но нищо не работи. Може ли някой да ми каже как да постъпя.

Това е моята FIDDLE

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

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

    <div>Collapsible content 2</div>
</div>
<!-- end wrap -->
<div class="wrap">
     <h3><a href="/bg#">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. функция collapseAll() { alert(извикване на collapseAll); $(#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