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.
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?
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
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.'
}
|
|