Jquery手风琴,下一个和上一个向导,如何获得上一节和下一节？

Question

我有一个Jquery手风琴,工作正常.单击相应标题时,节将展开/折叠.但是我想添加功能,这样当我点击"下一步"按钮时,它会打开下一部分,然后点击"上一步"按钮将我带回上一部分.

这已经在这个页面http://jquery.bassistance.de/accordion/demo/?p=1.1.2(最后一个例子)上完成,但不知道如何在我的情况下实现相同的.

请给我任何建议.

谢谢

更新:如何获得手风琴的上一节或下一节？

<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>