title: How to FX.Accordion on mootools
body: <p>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. </p>
  
  <p>here is what I have tried so far but turns out no luck:</p>
  
  <pre><code>&lt;div class="panel-group checkout-accordion" id="accordion" data-behavior="Accordion" data-accordion-options="'headers': 'a.accordion-toggle', 'sections': '.panel-collapse'"&gt;        
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;a class="accordion-toggle"&gt;&lt;span class="badge pull-left custom-badge"&gt;1&lt;/span&gt;
                     &lt;h3 class="panel-title"&gt; Checkout Method &lt;/h3&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div id="step1" class="panel-collapse"&gt;
                  &lt;div class="panel-body"&gt;
                      &lt;h3&gt;You're Logged in as Erica!&lt;/h3&gt;
                      &lt;a href="#" class="btn btn-primary btn-sm pull-right" data-trigger="reveal" data-reveal-target="!.panel-group .panel #step2"&gt;Continue &lt;i class="glyphicon glyphicon-arrow-right"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="panel panel-default" id="test"&gt;
              &lt;div class="panel-heading"&gt;                    
                  &lt;a class="accordion-toggle"&gt;&lt;span class="badge pull-left custom-badge"&gt;2&lt;/span&gt;
                      &lt;h3 class="panel-title"&gt;Shipping Method&lt;/h3&gt;
                  &lt;/a&gt;                    
              &lt;/div&gt;
              &lt;div id="step2" class="panel-collapse"&gt;
                  &lt;div class="panel-body"&gt;
                      &lt;h3&gt;Destination State And Zip Code&lt;/h3&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="state" class="control-label"&gt;State&lt;/label&gt;
                          &lt;select id="state" class="no-flat-select form-control"&gt;
                              &lt;option value="0" selected="selected"&gt;Select State&lt;/option&gt;
                              &lt;option value="1"&gt;Florida&lt;/option&gt;
                              &lt;option value="2"&gt;Arkansas&lt;/option&gt;
                              &lt;option value="3"&gt;Alaska&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;label for="zip" class="control-label"&gt;Zip Code&lt;/label&gt;
                          &lt;input type="text" class="form-control" id="zip" placeholder="Zip Code"&gt;
                      &lt;/div&gt;
                      &lt;a href="#" class="btn btn-primary btn-sm pull-right"&gt;Continue &lt;i class="glyphicon glyphicon-arrow-right"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As further explanation of what my goal is. Here is an image that might help - <a href="http://ft3.dtupload.com/0o/accordion.png" rel="nofollow">link to image</a></p>