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?

  • Hello @CodingMageSheen ! Have you found any solution for this ? Mar 22, 2017 at 9:04
  • Sort of I did it in a way I'm not entirely comfortable with since no answer was given. I'll post what I did here for you. Mar 22, 2017 at 18:28

1 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() {
                var $progress = $("#progress");
                $activeStep = $("#checkoutSteps").find("li.active")[0].id;
                $activeTab = $progress.find("li.active")[0].id;

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

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

  • 1
    I'm posting this answer for -Sanchit Gupta. It however doesn't answer my specific question listed above just a work around. Mar 22, 2017 at 19:42
  • Thankyou @CodingMageSheen! I also did this using jQuery. However setInterval() is firing continuously. But I found this code useful $("body").on('DOMSubtreeModified', "mydiv", function() { alert('changed'); }); . The code only fire when mydiv content change and it works for me. Thank You again +1. Happy Coding :) Mar 23, 2017 at 6:25
  • 1
    Ah cool, yeah no problem glad I could help! Mar 23, 2017 at 18:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.