Unable to use the JavaScript (function) twice

Question

On top of my HTML document I have this JavaScript code for accordion sliders.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" >
    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: 9,
                                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);
    });
});

Then further down my HTML file I have this code, beginning the Accordion div for my slider

<div id="accordion" style="padding:5px;">
        <h4><a onclick="document.getElementById('accordion').style.margin='-30px 0 0 0'"></a></h4>

So below that, inside the accordion div is all my content thats in the accordion, it works great! However, when I try to create a second accordion div later on in my HTML file that one doesn't function.

My question: how can I use the accordion effect multiple times throughout my website?

Answer 1

Ids in your DOM should be unique. It looks to me like you are trying to create several DIVs with the same id ('accordion').

If you want to have more than one you should use the class parameter.

So use $(".accordion") instead of $("#accordion")

and <div class="accordion" style="padding:5px;"> instead of <div id="accordion" style="padding:5px;">

Answer 2

Try this :

function accordionDiv(){
        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: 9,
                                    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);
        });
    });
}

And call the accordionDiv() function every time you need it.

Answer 3

Make sure the selector in your code will reference both accordion elements:

            wizard = $("#accordion,#accordion2").accordion({ //selector looks at both div IDs
                            event: 'click',
                            active: 9,
                            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]); }

Also change the second DIV's onclick code points to the new div ID:

onclick="document.getElementById('accordion2').style.margin='-30px 0 0