JQuery аккордеон, следующий и предыдущий мастер, как получить предыдущие и следующие разделы?

Question

У меня есть аккордеон JQuery, который отлично работает. Разделы расширяются/сворачиваются при нажатии на соответствующие заголовки. Но я хочу добавить функциональность, чтобы при нажатии кнопки «Далее» открывается следующий раздел и нажатие кнопки «Предыдущая» возвращает меня к предыдущему разделу.

Это было сделано на этой странице http://jquery.bassistance.de/accordion/demo/?p=1.1.2 (последний пример), но не уверен, как мне реализовать то же самое в моем случае.

Любые предложения, пожалуйста.

Благодаря

UPDATE: Как получить предыдущий или следующий раздел аккордеона?

<script type="text/javascript"> 
$("#accordion").accordion({ 
    header: "h3.header" 
    , autoHeight: false 
    , collapsible: true 
    }); 
</script> 

<div id="accordion"> 
<h3 class="header">Section 1</h3> 
<div> content 1 .. content 1 .. content 1 .. content 1 .. 
    <input class="next" type="button" value="next"/> 
</div> 
<h3 class="header">Section 2</h3> 
<div> content 2 .. content 2 .. content 2 .. content 2 .. 
    <input class="previous" type="button" value="previous"/> 
    <input class="next" type="button" value="next"/> 
</div> 
<h3 class="header">Section 3</h3> 
<div> content 3 .. content 3 .. content 3 .. content 3 .. 
    <input class="previous" type="button" value="previous"/> 
</div> 
</div> 

Answer 1

Я был в состоянии заставить его работать. Дайте этому выстрел, он работает с JQuery 1.6 и JQuery UI 1.8:

HTML:

<div id="checkout"> 
    <h2><a href="#">Section 1</a></h2> 
    <div> 
     <form action="#"> 
      <h3>Content</h3> 
      <input type="submit" class="next" value="Continue" /> 
     </form> 
    </div> 
    <h2><a href="#">Section 2</a></h2> 
    <div> 
     <form action="#"> 
      <h3>Content</h3> 
      <input type="submit" class="prev" value="Back" /> 
     </form> 
    </div> 
</div> 

JQuery:

<script type="text/javascript"> 
    $(document).ready(function() { 
     // create new accordion 
     var checkout = $('#checkout').accordion({ event: false }); 

     // assign accordion navigation events to button clicks 
     $('form', checkout).each(function (index) { 
      $(this) 
      .children(':submit') 
      .filter('.next, .prev') 
      .click(function() { 
       checkout.accordion('option', 'active', index + ($(this).is('.next') ? 1 : -1)); 
       return false; 
      }); 
     }); 
    }); 
</script> 

Answer 2

Вы пытались сделать так, как в примере?

var wizard = $("#accordion").accordion({ 
    header: 'h3.header', 
    event: false 
}); 

$("h3.header", wizard).each(function(index) { 
    $(this) 
    .next() 
    .children(":button") 
    .filter(".next, .previous") 
    .click(function() { 
     wizard.changeAccordion("activate", index + ($(this).is(".next") ? 1 : -1)) 
    }); 
}); 

Answer 3

Я искал решение той же проблемы и придумать с этим (я работаю с JQuery 1.4.2 и JQuery UI 1.8.1):

<div id="wizard"> 
    <h3><a href="#step1">Step 1/3</a></h3> 
    <div id="step1"> 
     <button type="button">Next &raquo;</button> 
    </div> 
    <h3><a href="#step2">Step 2/3</a></h3> 
    <div id="step2"> 
     <button type="button">Next &raquo;</button> 
    </div> 
    <h3><a href="#step3">Step 3/3</a></h3> 
    <div id="step3"> 
     <button type="submit">Finish</button> 
    </div> 
</div> 

И это сценарий:

<script type="text/javascript"> 
    $(function() { 

     $('#wizard').accordion(); 

     $('#wizard :button').each(function (index, elm) { 
      $(elm).click(function() { 
       $('#wizard').accordion('activate', index + 1); 
      }); 
     }); 

    }); 
</script> 

Answer 4

попробовать это:

var wizard = $("#register_form").accordion({ 
    header: '.title', 
    event: 'none', 
    collapsible: false 
}); 
$(':button.previous').click(function() { wizard.accordion("activate", 0); }); 
$(':button.next').click(function() { wizard.accordion("activate", 1); }); 

Где :button - это предыдущие и следующие кнопки, а wizard - ваш аккордеон jQuery. Оставьте все остальные коды. Посмотрите, работает ли это. Пожалуйста, оставьте отзыв, спасибо.

Answer 5

У меня была аналогичная проблема, и используется:

<button onclick="$('#accordion').accordion('activate', 0);">Prev</button> 
<button onclick="$('#accordion').accordion('activate', 2);">Next</button> 

на каждом аккордеона панели. Это находится на второй панели и возвращает вас к первому (индекс 0) или вперед к третьему (индекс 2).

Answer 6

Добавьте это к файлам JQuery. Он добавляет функцию $ («# accordion»). Accordion («next») и параметр «loopOnNext» (по умолчанию false), чтобы заставить его вернуться в верхнее окно, когда оно находится в конце.

$.extend($.ui.accordion.prototype, { 
    next: function(){ 
     var index = this.option('active') || 0, 
      next = index + 1, 
     nodes = $(this.element).children('h3').length; 
     if(next >= nodes && this.option('loopOnNext') === true) { 
      next = 0; 
     } 

     return this.activate(next); 
    } 
});