Magento : One Step Checkout Accordion

Question

Here is my accordion and it's working beautifully.

var accordion = new Accordion('checkoutSteps', '.step-title', true);
    <?php if($this->getActiveStep()): ?>
    accordion.openSection('opc-<?php echo $this->getActiveStep() ?>');
    <?php endif ?>
    var checkout = new Checkout(accordion, {
            progress: '<?php echo $this->getUrl('checkout/onepage/progress') ?>',
            review: '<?php echo $this->getUrl('checkout/onepage/review') ?>',
            saveMethod: '<?php echo $this->getUrl('checkout/onepage/saveMethod') ?>',
            failure: '<?php echo $this->getUrl('checkout/cart') ?>'
        }
    );

I have to call this custom function backTab(). How can I call this function when my accordion successfully moves to the next step?

Answer 1

I created a self executing function to initiate jQuery. Then created a function called theNextTab(). I just have this in a tag under the accordion.

Essentially I gave all the next buttons a name attribute of "nextBtn1" or "nextBtn2" and I gave all the back buttons a name attribute of "backBtn". Once of of them is clicked I run theNextTab function which uses jQuery to find the current active step in the accordion then run code based off which step its on. It's a more hack-y solution that works for us. Let me know if you have any questions.

(function () {
        var $ = jQuery;

        //setTimeout to wait for checkout step to load.
        //calls recursion if step hasn't loaded every second
        //will switch checkoutArrows if steps are different after timeout
        //used "1" to have similar ID's to match
        function theNextTab() {
            setTimeout(function(){
                var $progress = $("#progress");
                $activeStep = $("#checkoutSteps").find("li.active")[0].id;
                $activeTab = $progress.find("li.active")[0].id;

                if($activeStep + "1" == $activeTab){
                    theNextTab();
                }
                else{
                    $oldActiveTab = $progress.find("li.active");
                    $oldActiveTab.removeClass("active");
                    $currentTab = $progress.find("#" + $activeStep + "1");
                    $currentTab.addClass("active");
                }

            }, 1000);
        }

        var $nextButton1 = $("button[name='nextBtn1']"),
            $nextButton2 = $("button[name='nextBtn2']"),
            $backButton = $("a[name='backBtn']");

        $nextButton1.on({click: theNextTab});
        $nextButton2.on({click: theNextTab});
        $backButton.on({click: theNextTab});

    })();