How to FX.Accordion on mootools

Question

I am creating a checkout page design that has an accordion. My employer only allows mootools as their js framework and doesn't want jquery on their application. I am using BehaviorUI for front-end framework as it is a replica of bootstrap but are built based on mootools. The only problem is I am having trouble on creating the next/continue button for the next accordion.

here is what I have tried so far but turns out no luck:

<div class="panel-group checkout-accordion" id="accordion" data-behavior="Accordion" data-accordion-options="'headers': 'a.accordion-toggle', 'sections': '.panel-collapse'">        
        <div class="panel panel-default">
            <div class="panel-heading">
                <a class="accordion-toggle"><span class="badge pull-left custom-badge">1</span>
                   <h3 class="panel-title"> Checkout Method </h3>
                </a>
            </div>
            <div id="step1" class="panel-collapse">
                <div class="panel-body">
                    <h3>You're Logged in as Erica!</h3>
                    <a href="#" class="btn btn-primary btn-sm pull-right" data-trigger="reveal" data-reveal-target="!.panel-group .panel #step2">Continue <i class="glyphicon glyphicon-arrow-right"></i></a>
                </div>
            </div>
        </div>

        <div class="panel panel-default" id="test">
            <div class="panel-heading">                    
                <a class="accordion-toggle"><span class="badge pull-left custom-badge">2</span>
                    <h3 class="panel-title">Shipping Method</h3>
                </a>                    
            </div>
            <div id="step2" class="panel-collapse">
                <div class="panel-body">
                    <h3>Destination State And Zip Code</h3>
                    <div class="form-group">
                        <label for="state" class="control-label">State</label>
                        <select id="state" class="no-flat-select form-control">
                            <option value="0" selected="selected">Select State</option>
                            <option value="1">Florida</option>
                            <option value="2">Arkansas</option>
                            <option value="3">Alaska</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="zip" class="control-label">Zip Code</label>
                        <input type="text" class="form-control" id="zip" placeholder="Zip Code">
                    </div>
                    <a href="#" class="btn btn-primary btn-sm pull-right">Continue <i class="glyphicon glyphicon-arrow-right"></i></a>
                </div>
            </div>
        </div>
</div>

As further explanation of what my goal is. Here is an image that might help - link to image

Answer 1

It might be helpful to just go look at what Behavior.Accordion.js is doing (source here on github)

All it does is create an instance of Fx.Accordion for you. Your use of the reveal delegator is sort of out of scope of the accordion in that it, independently, knows how to show things, but it doesn't invoke any of Fx.Accordion's methods (which wouldn't hide the first section).

No problem though. Just write a new delegator!

http://jsfiddle.net/4y5sLt5d/

Delegator.register('click', {
  'showAccordionSection': {
    requireAs: {
      // gotta tell it which section you want to show
      target: String
    },
    defaults: {
      // how to find the accordion instance
      // by convention, all selectors are relative to the element with
      // the trigger. this default assumes the clicked element is inside
      // the accordion.
      accordionSelector: '![data-behavior*=Accordion]'
    },
    handler: function(event, element, api){
      // find the target section to show
      var target = api.getElement('target');
      // we gotta find the accordion instance, so we look for
      var accordionElement = api.getElement('accordionSelector');
      // get the accordion instance from the element, created by Behavior
      var accordionInstance = accordionElement.getBehaviorResult('Accordion');
      // no accordion found? fail quietly
      if (!accordionInstance) api.fail('Could not retrieve Fx.Accordion instance from element', accordionElement);
      // not a section of the accordion? fail quietly
      if (accordionInstance.elements.indexOf(target) < 0) api.fail('Target element is not an accordion section', target);
      // show it!
      accordionInstance.display(target);
    }
  }
});

Just drop that anywhere into your site's javascript (after Delegator of course) and you're good to go.