I have a Jquery accordion which works fine. Sections get expanded/collapsed when clicked on respective headers. But I want to add the functionality so that when I click on "next" button it opens up the next section and clicking "Previous" button takes me back to previous section.

This has been done on this page /?p=1.1.2 (last example) but not sure how do I implement the same in my case.

Any suggestions please.

Thanks

UPDATE: How do I get previous or next section of the accordion?

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

I have a Jquery accordion which works fine. Sections get expanded/collapsed when clicked on respective headers. But I want to add the functionality so that when I click on "next" button it opens up the next section and clicking "Previous" button takes me back to previous section.

This has been done on this page http://jquery.bassistance.de/accordion/demo/?p=1.1.2 (last example) but not sure how do I implement the same in my case.

Any suggestions please.

Thanks

UPDATE: How do I get previous or next section of the accordion?

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

• javascript
• jquery
• accordion

• Can you mark one of the answers as accepted or did none of them work for you? – Mateng Commented Mar 24, 2012 at 18:31
• @Mateng - I used JQueryUI Accordion instead of the code in the question as none of the answers helped me back then. – TigerTiger Commented Mar 26, 2012 at 13:48
• 1 jQueriUI Accordion is the successor of the jQuery accordion plugin. With jQueryUI, @johnjelineks solution works just fine. BTW: You can answer your own question, then mark it as correct. – Mateng Commented Mar 27, 2012 at 18:12

6 Answers 6

I was able to get it to work. Give this a shot, it works with jQuery 1.6 and 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>

Add this to your jQuery files. It adds a function $("#accordion").accordion("next") and an option, "loopOnNext" (default false) to force it to return to the top box when it's at the end.

$.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);
    }
});

I had a similar problem and used:

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

on each accordion pane. This is on the 2nd pane and brings you back to the first (index of 0) or forward to the third (index of 2).

Have you tried to do just like in example?

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)) 
    }); 
});

I was looking for a solution to the same problem and e up with this (I'm working with jQuery 1.4.2 and 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>

And this is the script:

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

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

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

    });
</script>

try this:

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); });

Where :button are the prev and next buttons, and wizard is your jQuery accordion. Leave out all the other code. See if this works. Please leave feedback, thanks.