Programmatically change jQuery accordion

jQuery provides us a rich set of UI controls to be used in our sites like (Datepicker, Tabs, Accordion etc.). Accordion allow us to accommodate more than one panels in one control . Each panel may have different data to display, but at a time we can show only one panel . At one time our concern was to flip the Accordion panel using external button say “Next” and “Prev” buttons.

Solution : Change the active panel programmatically is a simple work to do . We have to simply activate the panel by :

wizard.accordion(“activate”, index);

In the demo application I have taken 4 panel Accordion and two buttons “Previous” and “Next” to change the Accordion page.
In the same way we can also take “First” and “Last” buttons , Particular Panel dropdown etc.

Copy paste the following code in a file and save it with .html extension . Run in browser (Allow block content for IE) :

    Demo Accordion
     #accordion{padding:5px;width:50%;} 
    
    
    
    
        var gCurrentIndex = 0; // global variable to keep the current index;
        var ACCORDION_PANEL_COUNT = 3; //global variable for panel count. Here 3 is for zero based accordion index
 
        $(document).ready(function () {
                wizard = $("#accordion").accordion({
                                    event: 'click',
                                    active: 0,
                                    autoheight: true,
                                    animated: "bounceslide",
                                    icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' },
                                    change: function (event, ui) { gCurrentIndex = $(this).find("h4").index(ui.newHeader[0]); }
        });
 
        //Bind event for previous and next buttons
        $('.previous,.next').click(function () {
                var index = 0;
                if ($(this).hasClass('next')) {
                        index = gCurrentIndex + 1;
                        if (index > ACCORDION_PANEL_COUNT ) {
                                index = ACCORDION_PANEL_COUNT;
                        }
                }
                else {
                        index = gCurrentIndex - 1;
                        if (index < 0) {
                               index = 0;
                        }
                }
 
        //Call accordion method to set the active panel
          wizard.accordion("activate", index);
        });
    });
  
  
    
        
            

Tab1 1

            panel 1
            

Tab 2

            panel 2
            

Tab 3

            panel 3
            

Tab 4

            panel 4
        
        
        
    

Conclusion :
When we have a need of wizard type of solution in our project like Registration process, Account creation etc , try using accordion with custom navigation buttons (like above). We can get the same functionalities of wizard control and without postback !