You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
525 lines
18 KiB
525 lines
18 KiB
---
|
|
layout : 'default'
|
|
css : 'accordion'
|
|
element : 'accordion'
|
|
elementType : 'module'
|
|
|
|
title : 'Accordion'
|
|
description : 'An accordion allows users to toggle the display of sections of content'
|
|
type : 'UI Module'
|
|
|
|
themes : ['Default', 'Chubby']
|
|
---
|
|
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/modules/accordion.less" />
|
|
<script src="/javascript/accordion.js"></script>
|
|
|
|
<%- @partial('header', { tabs: 'module' }) %>
|
|
|
|
<div class="main container">
|
|
|
|
<div class="ui active tab" data-tab="definition">
|
|
|
|
<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">Styled</h4>
|
|
<p>A styled accordion adds basic formatting</p>
|
|
<div class="ui styled 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 styled 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">
|
|
<h4 class="ui header">Nested</h4>
|
|
<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 styled accordion">
|
|
<div class="active title">
|
|
<i class="dropdown icon"></i>
|
|
Level 1
|
|
</div>
|
|
<div class="active content">
|
|
Welcome to level 1
|
|
<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</p>
|
|
<div class="accordion">
|
|
<div class="active title">
|
|
<i class="dropdown icon"></i>
|
|
Level 2A
|
|
</div>
|
|
<div class="active content">
|
|
<p>Level 2A Contents</p>
|
|
<div class="accordion">
|
|
<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>
|
|
<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">
|
|
<h4 class="ui header">Form</h4>
|
|
<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 fluid 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="ui accordion 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">
|
|
<h4 class="ui header">Menu</h4>
|
|
<p>An accordion can be used to create content drawers inside a menu</p>
|
|
<div class="ui vertical accordion menu">
|
|
<div class="item">
|
|
<a class="active title">
|
|
<i class="dropdown icon"></i>
|
|
Size
|
|
</a>
|
|
<div class="active content">
|
|
<div class="ui form">
|
|
<div class="grouped 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="title">
|
|
<i class="dropdown icon"></i>
|
|
Colors
|
|
</a>
|
|
<div class="content">
|
|
<div class="ui form">
|
|
<div class="grouped 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>
|
|
|
|
<div class="no example">
|
|
<h4 class="ui header">Initializing an accordion</h4>
|
|
<p>Accordion is initialized on pre-existing markup</p>
|
|
<div class="test code">
|
|
$('.ui.accordion')
|
|
.accordion()
|
|
;
|
|
</div>
|
|
</div>
|
|
|
|
<div class="no example">
|
|
<h4 class="ui header">AJAX Content</h4>
|
|
<p>Accordions use <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" target="_blank">DOM Mutation Observers</a> and delegated events to allow for easy compataibility with AJAX content, or content added after initialization.</p>
|
|
<p>If the DOM tree changes the module will automatically call <code>module.refresh</code> and update the selector cache. Because events are bound on the parent module using delegated events, events will automatically fire on content added after initialization.</p>
|
|
<p>If you change other attributes of the module without DOM insertion and need to update the cache you can do so by calling this module's <code>refresh</code> behavior.
|
|
<div class="code" data-type="javascript">
|
|
$('.ui.accordion').accordion('refresh');
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Behaviors</h2>
|
|
|
|
<p>Behaviors are short english phrases used for accessing specific functionality in
|
|
|
|
<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">
|
|
<tr>
|
|
<td>open (index)</td>
|
|
<td>Opens accordion content at index</td>
|
|
</tr>
|
|
<tr>
|
|
<td>close others</td>
|
|
<td>Closes accordion content that are not active</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">
|
|
<h2 class="ui dividing header">
|
|
Accordion
|
|
</h2>
|
|
|
|
<h4 class="ui header">
|
|
Behavior
|
|
</h4>
|
|
<table class="ui sortable celled definition table">
|
|
<thead>
|
|
<th class="three wide"></th>
|
|
<th class="three wide">Default</th>
|
|
<th>Description</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>exclusive</td>
|
|
<td>true</td>
|
|
<td>Only allow one section open at a time</td>
|
|
</tr>
|
|
<tr>
|
|
<td>close nested</td>
|
|
<td>true</td>
|
|
<td>Allow active sections to collapse</td>
|
|
</tr>
|
|
<tr>
|
|
<td>collapsible</td>
|
|
<td>true</td>
|
|
<td>Allow active sections to collapse</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>Easing of opening animation. EaseInOutQuint is included with accordion, for additional options you must include <a href="http://gsgd.co.uk/sandbox/jquery/easing/">easing equations</a>.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h4 class="ui header">
|
|
Callbacks
|
|
</h4>
|
|
|
|
<table class="ui sortable celled definition table">
|
|
<thead>
|
|
<th class="three wide"></th>
|
|
<th class="three wide">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>
|
|
|
|
<h2 class="ui dividing header">
|
|
Module
|
|
</h2>
|
|
|
|
<p>These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.</p>
|
|
|
|
<table class="ui sortable celled definition table">
|
|
<thead>
|
|
<th></th>
|
|
<th class="six wide">Default</th>
|
|
<th>Description</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>name</td>
|
|
<td>Accordion</td>
|
|
<td>Name used in log statements</td>
|
|
</tr>
|
|
<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">
|
|
selector : {
|
|
accordion : '.accordion',
|
|
title : '.title',
|
|
content : '.content'
|
|
}
|
|
</div>
|
|
</td>
|
|
<td>Selectors used to find parts of a module</td>
|
|
</tr>
|
|
<tr>
|
|
<td>className</td>
|
|
<td>
|
|
<div class="code">
|
|
className : {
|
|
active : 'active'
|
|
}
|
|
</div>
|
|
</td>
|
|
<td>Class names used to determine element state</td>
|
|
</tr>
|
|
<tr>
|
|
<td>debug</td>
|
|
<td>false</td>
|
|
<td>Debug output to console</td>
|
|
</tr>
|
|
<tr>
|
|
<td>performance</td>
|
|
<td>false</td>
|
|
<td>Show <code>console.table</code> output with performance metrics</td>
|
|
</tr>
|
|
<tr>
|
|
<td>verbose</td>
|
|
<td>false</td>
|
|
<td>Debug output includes all internal behaviors</td>
|
|
</tr>
|
|
<tr>
|
|
<td>errors</td>
|
|
<td colspan="2">
|
|
<div class="code">
|
|
error : {
|
|
method : 'The method you called is not defined.'
|
|
}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|