--- 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' --- <%- @partial('header', { tabs: 'module' }) %>

Types

Accordion

A standard accordion

What is a dog?

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.

What kinds of dogs are there?

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.

How do you acquire a dog?

Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.

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.

Basic

A basic accordion does not add any extra formatting

What is a dog?

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.

What kinds of dogs are there?

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.

How do you acquire a dog?

Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.

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.

Variations

Fluid

An accordion can take up the width of its container

What is a dog?

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.

What kinds of dogs are there?

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.

How do you acquire a dog?

Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.

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.

Examples

Nested

An accordion can have multiple levels of nested content. This content can either be in a nested accordion or simply another level of title and content

Level 1

Welcome to level 1 where sub content formatted as its own accordion.

Level 1A

Level 1A Contents

Level 1A-A
Level 1A-A Contents
Level 1A-B
Level 1A-B Contents
Level 1B
Level 1B Contents
Level 1C
Level 1C Contents
Level 2

Welcome to level 2 where content is formatted without nested accordions

Level 2A

Level 2A Contents

Level 2A-A
Level 2A-A Contents
Level 2A-B
Level 2A-B Contents
Level 2B
Level 2B Contents
Level 2C
Level 2C Contents

Form

An accordion can be used anywhere where content can be shown or hidden. For example, to show optional form fields.

Optional Details
Sign Up

Menu

An accordion can be used to create content drawers inside a menu

Initializing

Initializing an accordion

$('.ui.accordion') .accordion() ;

Behaviors

Behaviors are accessible with javascript using the syntax:

$('.ui.accordion').accordion('behavior', argumentOne, argumentTwo...);
open (index) Opens accordion content at index
close (index) Closes accordion content at index
toggle (index) Toggles accordion content at index

Accordion Settings
Accordion settings modify its behavior

Setting Default Description
exclusive true Set to false to allow multiple sections to be open at the same time
collapsible true Set to false to require an accordion to always have a section open
duration 500 Duration in ms of opening animation
easing easeInOutQuint EaseInOutQuint is included with accordion, for additional options consider jQuery easing)

Callbacks
Callbacks specify a function to occur after a specific behavior.

Setting Context Description
onOpen active content Callback on element open
onClose active content Callback on element close
onChange active content Callback on element open or close

DOM Settings
DOM settings specify how this module should interface with the DOM

Setting Default Description
namespace accordion Event namespace. Makes sure module teardown does not effect other events attached to an element.
selector
{ title : '.title', content : '.content' }
Object containing selectors used by module.
className
className : { active : 'active' }
Class names used to attach style to state

Debug Settings
Debug settings controls debug output to the console

Setting Default Description
name Accordion Name used in debug logs
debug True Provides standard debug output to console
performance True Provides standard debug output to console
verbose True Provides ancillary debug output to console
errors
error : { method : 'The method you called is not defined.', notFound : 'There were no elements that matched the specified selector' }