---
layout      : 'default'
css         : 'accordion'

title       : 'Accordion'
description : 'An accordion displays a single piece of content, while allowing the option of displaying other related content'
type        : 'UI Module'
---
<script src="/javascript/accordion.js"></script>

<%- @partial('header', { tabs: 'module' }) %>

<div class="main container">

  <div class="ui active tab" data-tab="definition">

    <div class="peek">
      <div class="ui vertical pointing secondary menu">
        <a class="active item">Types</a>
        <a class="item">Variations</a>
      </div>
    </div>

    <h2 class="ui dividing header">Types</h2>
    <div class="example">
      <h4 class="ui header">Accordion</h4>
      <p>A standard accordion</p>
      <div class="ui accordion">
        <div class="active title">
          <i class="dropdown icon"></i>
          What is a dog?
        </div>
        <div class="active content">
          <p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
        </div>
        <div class="title">
          <i class="dropdown icon"></i>
          What kinds of dogs are there?
        </div>
        <div class="content">
          <p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
        </div>
        <div class="title">
          <i class="dropdown icon"></i>
          How do you acquire a dog?
        </div>
        <div class="content">
          <p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
          <p>A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
        </div>
      </div>
    </div>

    <div class="example">
      <h4 class="ui header">Basic</h4>
      <p>A basic accordion does not add any extra formatting</p>
      <div class="ui basic accordion">
        <div class="active title">
          <i class="dropdown icon"></i>
          What is a dog?
        </div>
        <div class="active content">
          <p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
        </div>
        <div class="title">
          <i class="dropdown icon"></i>
          What kinds of dogs are there?
        </div>
        <div class="content">
          <p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
        </div>
        <div class="title">
          <i class="dropdown icon"></i>
          How do you acquire a dog?
        </div>
        <div class="content">
          <p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
          <p>A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
        </div>
      </div>
    </div>

    <h2 class="ui dividing header">Variations</h2>
    <div class="example">
      <h4 class="ui header">Fluid</h4>
      <p>An accordion can take up the width of its container</p>
      <div class="ui fluid accordion">
        <div class="active title">
          <i class="dropdown icon"></i>
          What is a dog?
        </div>
        <div class="active content">
          <p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
        </div>
        <div class="title">
          <i class="dropdown icon"></i>
          What kinds of dogs are there?
        </div>
        <div class="content">
          <p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
        </div>
        <div class="title">
          <i class="dropdown icon"></i>
          How do you acquire a dog?
        </div>
        <div class="content">
          <p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
          <p>A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
        </div>
      </div>
    </div>

  </div>

  <div class="ui tab" data-tab="examples">

    <h2 class="ui dividing header">Examples</h2>

    <div class="example">
      <h3 class="ui header">Nested</h3>
      <p>An accordion can have multiple levels of nested content. This content can either be in a nested <code>accordion</code> or simply another level of <code>title</code> and <code>content</code></p>
      <div class="ui accordion">
        <div class="active title">
          <i class="dropdown icon"></i>
          Level 1
        </div>
        <div class="active content">
          <p>Welcome to level 1 where sub content formatted as its own accordion.</p>
          <div class="accordion">
            <div class="active title">
                <i class="dropdown icon"></i>
                Level 1A
            </div>
            <div class="active content">
              <p>Level 1A Contents</p>
              <div class="accordion">
                <div class="title">
                    <i class="dropdown icon"></i>
                    Level 1A-A
                </div>
                <div class="content">
                    Level 1A-A Contents
                </div>
                <div class="title">
                    <i class="dropdown icon"></i>
                    Level 1A-B
                </div>
                <div class="content">
                    Level 1A-B Contents
                </div>
              </div>
            </div>
            <div class="title">
                <i class="dropdown icon"></i>
                Level 1B
            </div>
            <div class="content">
                Level 1B Contents
            </div>
            <div class="title">
                <i class="dropdown icon"></i>
                Level 1C
            </div>
            <div class="content">
                Level 1C Contents
            </div>
          </div>
        </div>
        <div class="title">
          <i class="dropdown icon"></i>
          Level 2
        </div>
        <div class="content">
          <p>Welcome to level 2 where content is formatted without nested accordions</p>
          <div class="active title">
            <i class="dropdown icon"></i>
            Level 2A
          </div>
          <div class="active content">
            <p>Level 2A Contents</p>
            <div class="title">
                <i class="dropdown icon"></i>
                Level 2A-A
            </div>
            <div class="content">
                Level 2A-A Contents
            </div>
            <div class="title">
                <i class="dropdown icon"></i>
                Level 2A-B
            </div>
            <div class="content">
                Level 2A-B Contents
            </div>
          </div>
          <div class="title">
              <i class="dropdown icon"></i>
              Level 2B
          </div>
          <div class="content">
              Level 2B Contents
          </div>
          <div class="title">
              <i class="dropdown icon"></i>
              Level 2C
          </div>
          <div class="content">
              Level 2C Contents
          </div>
        </div>
        </div>
      </div>
    </div>

    <div class="example">
      <h3 class="ui header">Form</h3>
      <p>An accordion can be used anywhere where content can be shown or hidden. For example, to show optional form fields.</p>
      <div class="ui segment">
        <div class="ui basic fluid accordion form">
          <div class="two fields">
            <div class="field">
              <label>First Name</label>
              <input placeholder="First Name" type="text">
            </div>
            <div class="field">
              <label>Last Name</label>
              <input placeholder="Last Name" type="text">
            </div>
          </div>
          <div class="field">
            <div class="title">
              <i class="icon dropdown"></i>
              Optional Details
            </div>
            <div class="content field">
              <label>Maiden Name</label>
              <input placeholder="Maiden Name" type="text">
            </div>
          </div>
          <div class="ui secondary submit button">Sign Up</div>
        </div>
      </div>
    </div>
    <div class="example">
      <h3 class="ui header">Menu</h3>
      <p>An accordion can be used to create content drawers inside a menu</p>
      <div class="ui basic vertical accordion menu">
        <div class="item">
          <a class="active title">
            <i class="dropdown icon"></i>
            Size
          </a>
          <div class="active content menu">
            <div class="ui form item">
              <div class="grouped inline fields">
                <div class="field">
                  <div class="ui radio checkbox">
                    <input type="radio" name="size" value="small" />
                    <label>Small</label>
                  </div>
                </div>
                <div class="field">
                  <div class="ui radio checkbox">
                    <input type="radio" name="size" value="medium" />
                    <label>Medium</label>
                  </div>
                </div>
                <div class="field">
                  <div class="ui radio checkbox">
                    <input type="radio" name="size" value="large" />
                    <label>Large</label>
                  </div>
                </div>
                <div class="field">
                  <div class="ui radio checkbox">
                    <input type="radio" name="size" value="x-large" />
                    <label>X-Large</label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <a class="active title">
            <i class="dropdown icon"></i>
            Colors
          </a>
          <div class="active content menu">
            <div class="ui form item">
              <div class="grouped inline fields">
                <div class="field">
                  <div class="ui checkbox">
                    <input type="checkbox" name="small" />
                    <label>Red</label>
                  </div>
                </div>
                <div class="field">
                  <div class="ui checkbox">
                    <input type="checkbox" name="medium" />
                    <label>Orange</label>
                  </div>
                </div>
                <div class="field">
                  <div class="ui checkbox">
                    <input type="checkbox" name="large" />
                    <label>Green</label>
                  </div>
                </div>
                <div class="field">
                  <div class="ui checkbox">
                    <input type="checkbox" name="x-large" />
                    <label>Blue</label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="ui tab" data-tab="usage">

    <h2 class="ui dividing header">Initializing</h2>
    <h3 class="ui header">Initializing an accordion</h3>
    <div class="test code">
    $('.ui.accordion')
      .accordion()
    ;
    </div>

    <h2 class="ui dividing header">Behaviors</h2>

    <p>Behaviors are accessible with javascript using the syntax:<p>
    <div class="code">
    $('.ui.accordion').accordion('behavior', argumentOne, argumentTwo...);
    </div>

    <table class="ui definition celled table segment">
      <tr>
        <td>open (index)</td>
        <td>Opens accordion content at index</td>
      </tr>
      <tr>
        <td>close (index)</td>
        <td>Closes accordion content at index</td>
      </tr>
      <tr>
        <td>toggle (index)</td>
        <td>Toggles accordion content at index</td>
      </tr>
    </table>

  </div>

  <div class="ui tab" data-tab="settings">

    <h3 class="ui header">
      Accordion Settings
      <div class="sub header">Accordion settings modify its behavior</div>
    </h3>
    <table class="ui sortable celled definition table segment">
      <thead>
        <th>Setting</th>
        <th class="four wide">Default</th>
        <th>Description</th>
      </thead>
      <tbody>
        <tr>
          <td>exclusive</td>
          <td>true</td>
          <td>Set to false to allow multiple sections to be open at the same time</td>
        </tr>
        <tr>
          <td>collapsible</td>
          <td>true</td>
          <td>Set to false to require an accordion to always have a section open</td>
        </tr>
        <tr>
          <td>duration</td>
          <td>500</td>
          <td>Duration in ms of opening animation</td>
        </tr>
        <tr>
          <td>easing</td>
          <td>easeInOutQuint</td>
          <td>EaseInOutQuint is included with accordion, for additional options consider <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery easing</a>)</td>
        </tr>
      </tbody>
    </table>

    <h3 class="ui header">
      Callbacks
      <div class="sub header">Callbacks specify a function to occur after a specific behavior.</div>
    </h3>

    <table class="ui sortable celled definition table segment">
      <thead>
        <th class="four wide">Setting</th>
        <th>Context</th>
        <th>Description</th>
      </thead>
      <tbody>
        <tr>
          <td>onOpen</td>
          <td>active content</td>
          <td>Callback on element open</td>
        </tr>
        <tr>
          <td>onClose</td>
          <td>active content</td>
          <td>Callback on element close</td>
        </tr>
        <tr>
          <td>onChange</td>
          <td>active content</td>
          <td>Callback on element open or close</td>
        </tr>
      </tbody>
    </table>

    <h3 class="ui header">
      DOM Settings
      <div class="sub header">DOM settings specify how this module should interface with the DOM</div>
    </h3>
    <table class="ui sortable celled definition table segment">
      <thead>
        <th>Setting</th>
        <th class="six wide">Default</th>
        <th>Description</th>
      </thead>
      <tbody>
        <tr>
          <td>namespace</td>
          <td>accordion</td>
          <td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
        </tr>
        <tr>
          <td>selector</td>
          <td>
            <div class="code" data-type="css">
            {
              title   : '.title',
              content : '.content'
            }
            </div>
          </td>
          <td>Object containing selectors used by module.</td>
        </tr>
        <tr>
          <td>className</td>
          <td>
            <div class="code">
            className : {
              active : 'active'
            }
            </div>
          </td>
          <td>Class names used to attach style to state</td>
        </tr>
      </tbody>
    </table>

    <h3 class="ui header">
      Debug Settings
      <div class="sub header">Debug settings controls debug output to the console</div>
    </h3>

    <table class="ui sortable celled definition table segment">
      <thead>
        <th>Setting</th>
        <th class="four wide">Default</th>
        <th>Description</th>
      </thead>
      <tbody>
        <tr>
          <td>name</td>
          <td>Accordion</td>
          <td>Name used in debug logs</td>
        </tr>
        <tr>
          <td>debug</td>
          <td>True</td>
          <td>Provides standard debug output to console</td>
        </tr>
        <tr>
          <td>performance</td>
          <td>True</td>
          <td>Provides standard debug output to console</td>
        </tr>
        <tr>
          <td>verbose</td>
          <td>True</td>
          <td>Provides ancillary debug output to console</td>
        </tr>
        <tr>
          <td>errors</td>
          <td colspan="2">
            <div class="code">
            error   : {
              method   : 'The method you called is not defined.',
              notFound : 'There were no elements that matched the specified selector'
            }
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>