Menu

Accordion
An accordion allows users to toggle the display of sections of content

Download

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.

Styled

A styled accordion adds basic 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.

Inverted

An accordion can be formatted to appear on dark backgrounds

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 Accordions

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
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

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

Changing Trigger

An accordion normally triggers when its title is clicked. However you can change the trigger selector to specify an element inside a title to use as an activator

$('.trigger.example .accordion') .accordion({ selector: { trigger: '.title .icon' } }) ;
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.

Form Fields

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

Optional Details
Sign Up

Accordion Menu

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

Initializing

Initializing an accordion

Accordion is initialized on pre-existing markup

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

AJAX Content

Accordions use DOM Mutation Observers and delegated events to allow for easy compatibility with AJAX content, or content added after initialization.

If the DOM tree changes the module will automatically call module.refresh 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.

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 refresh behavior.

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

Behaviors

Behaviors are short english phrases used for accessing specific functionality in

Behaviors are accessible with Javascript using the syntax:

$('.ui.accordion').accordion('behavior', argumentOne, argumentTwo...);
refresh Refreshes all cached selectors and data
open (index) Opens accordion content at index
close others Closes accordion content that are not active
close (index) Closes accordion content at index
toggle (index) Toggles accordion content at index

Accordion

Behavior

Default Description
exclusive true Only allow one section open at a time
on click Event on title that will cause accordion to open
animateChildren true Whether child content opacity should be animated (may cause performance issues with many child elements)
closeNested true Close open nested accordion content when an element closes
collapsible true Allow active sections to collapse
duration 500 Duration in ms of opening animation
easing easeInOutQuint Easing of opening animation. EaseInOutQuint is included with accordion, for additional options you must include easing equations.

Callbacks

Context Description
onOpening active content Callback before element opens
onOpen active content Callback after element is open
onClosing active content Callback before element closes
onClose active content Callback after element is closed
onChanging active content Callback before element opens or closes
onChange active content Callback on element open or close

Module

These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.

Default Description
name Accordion Name used in log statements
namespace accordion Event namespace. Makes sure module teardown does not effect other events attached to an element.
selector
selector : { accordion : '.accordion', title : '.title', trigger : '.title', content : '.content' }
Selectors used to find parts of a module
className
className : { active : 'active', animating : 'animating' }
Class names used to determine element state
silent False Silences all console output including error messages, regardless of other debug settings.
debug false Debug output to console
performance true Show console.table output with performance metrics
verbose false Debug output includes all internal behaviors
errors
error : { method : 'The method you called is not defined.' }

Dimmer Message
Dimmer sub-header