Sandbox: JavaScript

About

Get base styles and flexible support for collapsible components like accordions and navigation.

Plugin dependency

Note: Be sure to require More-Behaviors/Behavior.Accordion when you build your library.

Bootstrap Class Name Divergence

Note: Don't give your panels the .collapse class. This implementation doesn't use CSS classes as it's based on the JS based Fx.Accordion from MooTools.

Example accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div class="panel-group" id="accordion" data-behavior="Accordion" data-accordion-options="
  'headers': 'a.accordion-toggle',
  'sections': '.panel-collapse'
">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

If you just want to do a single element, make a button toggle the expanding and collapsing of another element with the Delegator.toggleReveal trigger.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">
      <a data-trigger="toggleReveal" data-togglereveal-target="!.panel .panel-collapse">
        Collapsible Group Item #1
      </a>
    </h4>
  </div>
  <div id="collapseOne" class="panel-collapse">
    <div class="panel-body">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </div>
  </div>
</div>

Usage

See the docs for Fx.Accordion in MooTools More and the docs for Behavior.Accordion on dev.clientcide.com

Related Documentation

Note: Not all links in these work.

Behavior Filter: Behavior.Accordion

Creates an instance of Fx.Accorion for an element using the Accordion data filter.

Example

<div data-behavior="Accordion" data-accordion-options="
    'headers':'.header' //the default
    'sections':'.section' //the default
    'display': 1,
    'initialDisplayFx': false
">
  <div class="header">Toggle 1</div>
  <div class="section">This area is controlled by Toggle 1.</div>
  <div class="header">Toggle 2</div>
  <div class="section">This area is controlled by Toggle 2.</div>
  <div class="header">Toggle 3</div>
  <div class="section">This area is controlled by Toggle 3.</div>
</div>;

Options

  • elements - (string; defaults to .header) The selector to run against the element to find all the clickable headers.
  • sections - (string; defaults to .section) The selector to run against the element to find all the clickable sections.
  • display - (number; defaults to 0) The index of the element to show at start (with a transition). To force all elements to be closed by default, pass in -1.
  • show - (number) The index of the element to be shown initially.
  • trigger - (string; defaults to 'click') The event that triggers a change in element display.
  • orientation - (string; defaults to vertical) Either vertical or horizontal - determines whether or not the accordion transitions height or width. Horizontal accordions require CSS mastery to pull off, so be wary.
  • opacity - (boolean; defaults to true) If set to true, an opacity transition effect will take place when switching between displayed elements.
  • height - (boolean: defaults to true) If set to true, a height transition effect will take place when switching between displayed elements.
  • width - (boolean: defaults to false) If set to true, it will add a width transition to the accordion when switching between displayed elements. Warning: CSS mastery is required to make this work!
  • fixedHeight - (number) If set, displayed elements will have a fixed height equal to the specified value.
  • fixedWidth - (number) If set, displayed elements will have a fixed width equal to the specified value.
  • alwaysHide - (boolean; defaults to false) If set to true, it will be possible to close all displayable elements. Otherwise, one will remain open at all time.
  • initialDisplayFx - (boolean; defaults to true) If set to false, the initial item displayed will not display with an effect but will just be shown immediately.
  • resetHeight - (boolean; defaults to true) If set to false, the height of an opened accordion section will be set to an absolute pixel size.