| Table of Contents |
|---|
Description
An accordion is a list of headers that grouped content items that allow the user to hide or reveal additional content when selectedas needed.
An accordion is The accordion component delivers large amounts of content in a limited space through progressive disclosure. It is similar in purpose to a tabbed interface, : a list of items where exactly only one item is expanded into a panel (i.e. list items are shortcuts to access separate panels).
...
Usage & Behavior
An accordion should be used when
Allowing people to have control over the content by expanding it or deferring it for later lets them decide what to read and what to ignore.
If you have only a small space to display a lot of content, Collapsing the page minimizes scrolling.
Hiding parts of the content can make the web page appear less daunting.
General guidelines
Internal Logic
The accordion component delivers large amounts of content in a small space through progressive disclosure.
The user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion.
Accordions work especially well whenever vertical space is limited.
Default
The first section content in the accordion should be open when first loading the page.
structure
Header
Header text can wrap, but it is recommended that it is short and to the point.
The chevron icon can be found on the LUX Icon Font.
Content
...
...
General guidelines
The first section is open by default.
Only one section is open at any time.
An open section is stretched to its maximum possible height (not limited to its content), pushing sections below it to the bottom of the container.
Structure
Each section of the accordion must include a header and a content panel.
Header
The header contains:
a title - the title text can wrap up to two lines of text, but it is not recommended (always keep it short and to the point). If the title exceeds two lines it will be truncated, showing a tooltip on hover.
a chevron icon (included in the Verint Font Icon).
In case the content was changed, a mark (blue dot) is added to the header of the section.
In case the entire section is selectable, a Checkbox will appear in the header, before the title.
In case there is a warning or an error on a section, an icon will appear on the right side of the header.
Content panel
The open section has no maximum height. However, it must follow the other padding specs below.
- Section content height should have
The open section height should be a minimum of 3 text rows.
The width of an accordion
varies basedcan vary depending on the content, layout, and page design. Scrolling
Scrolling
Accordions take up 100% width of their parent container.
Scrolling
willshould be added to
sectioncontent
thatsections which exceed the height of the accordion container.
Default state
The first content section in the accordion should be open when first loading the page.
...
Section Header States
State |
|---|
Open | Closed | Comment |
|---|
Section header close
Section header open
Section header hover
Selected content mark
...
Regular | NA |  | |
Hover |  |  | |
Active |  |  | |
Selected | | NA | |
Focus | NA |  | |
Focus Selected |  |  |
Section Header States - Special Cases
State | Image | Comment |
|---|
Changed content mark |
 | |
Section header with checkbox |
 | |
Section header with warning |
 |
Interaction
You can Click on the entire accordion Section Header
Theres always one section open in the accordion, and only one
Only 1 content can be viewed at a time, when click on any part of a section header to select (open) it. This has two exceptions:
When a checkbox is shown, clicking it selects/deselects the checkbox.
When a warning icon is shown, clicking it opens a tooltip.
When opening a new section, the already previously-open section will should close automatically
when closing an open section, the next section in the accordion will open automatically, closing the last section in the accordion will open the section above him automatically
Hovering over section header will .
In case the title is longer than its container, hovering over a section header should show a tooltip with the full name of the section header.
Transitions
Clicked Section will side open Selected sections should slide open, while the former previously-open section in the accordion will close slides closed at the same time
...
. (see Code section below)
Best practices
Use:
For long lists, consider using search
Use clear labels - Accordions hide content, so the labels need to be clear.
If users will only need a few specific pieces of content within a page.
If you have only a small space to display a lot of contentwhere vertical space is limited.
to allow users to have control over the content, by expanding what they want to read and hiding what they want to ignore.
when wanting to minimize scrolling.
Don’t use:
If if users need to see most or all of the information on a page. Use . In this case, use well-formatted text instead.If
where the content can’t be divided into separate logic sections.
where there is not enough content to warrant condensing. Accordions increase cognitive load and interaction cost, as users have to make decisions about what headers to click on.
Usability guidance
Make the entire header selectable. Allow users to click anywhere in the header area to expand or collapse the content; a larger target is easier to manipulate.
Give interactive elements enough space. Make sure interactive elements within the collapsible region are far enough from the headers that users don’t accidentally trigger a collapse. (The exact distance depends on the device.)
Accessibility compliance
<<In general each component should be A11y complied, please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>
Focus management
<<How will the component work with keyboard only - without a mouse. Can be reference if written above
We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>
Screen reader support
<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>
Contrast & size compliance
...
show on each section.
General
In case the accordion contains a long list, consider using Search within the section.
Use clear labels: they need to clearly describe the hidden content.
Accessibility Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
Keyboard | Description |
|---|---|
Tab | Moves focus to the next focusable element. |
Shift + Tab | Moves focus to the previous focusable element. |
Space | When focus is on the accordion header of a collapsed section, expands the section. |
Enter | When focus is on the accordion header of a collapsed section, expands the section. |
Esc | N/A |
Arrows | Down
Up
|
Home | When focus is on an accordion header, moves focus to the first accordion header. |
End | When focus is on an accordion header, moves focus to the last accordion header. |
Design
Code
...
| Html macro | ||
|---|---|---|
| ||
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">
<div class="card">
<div class="card-header">Accordion <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre').toggle()">Toggle Markup</button></div>
<div class="card-body">
<form>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
<div class="col-lg-4">
<div class="accordion" id="accordionExample" role="tablist" aria-multiselectable="true">
<div class="card">
<a class="card-header" role="tab" id="headingOne1" data-toggle="collapse" data-parent="#accordionExample" href="#collapseOne1" aria-expanded="true"
aria-controls="collapseOne1">
<h5 class="mb-0">
Header <i class="icon-expand-down"></i>
</h5>
</a>
<div id="collapseOne1" class="collapse show" role="tabpanel" aria-labelledby="headingOne1"
data-parent="#accordionExample">
<div class="card-body">
Lorem ipsum dolor sit amet, an summo officiis pericula mea. Prima utamur his ad, ex nec saepe iudico. Putent nostrum ut eum. Harum mentitum eam et. Posse dicat nec at, cu eius delenit fuisset mei. Has errem delenit in, eos prompta vivendo disputando ex, scripta accusata interesset pri an. Dicta bonorum at eos, eos ex etiam bonorum oporteat, labore nusquam aliquando ad mel. Vim ea novum legendos liberavisse, et eos semper sapientem comprehensam, voluptua liberavisse quo at. Nam ea lorem movet fabulas, mel facete persecuti omittantur ea.
</div>
</div>
</div>
<div class="card">
<a class="card-header collapsed" role="tab" id="headingTwo2" data-toggle="collapse" data-parent="#accordionExample" href="#collapseTwo2"
aria-expanded="false" aria-controls="collapseTwo2">
<h5 class="mb-0">
Header <i class="icon-expand-down"></i>
</h5>
</a>
<div id="collapseTwo2" class="collapse" role="tabpanel" aria-labelledby="headingTwo2"
data-parent="#accordionExample">
<div class="card-body">
Lorem ipsum dolor sit amet, an summo officiis pericula mea. Prima utamur his ad, ex nec saepe iudico. Putent nostrum ut eum. Harum mentitum eam et. Posse dicat nec at, cu eius delenit fuisset mei. Has errem delenit in, eos prompta vivendo disputando ex, scripta accusata interesset pri an. Dicta bonorum at eos, eos ex etiam bonorum oporteat, labore nusquam aliquando ad mel. Vim ea novum legendos liberavisse, et eos semper sapientem comprehensam, voluptua liberavisse quo at. Nam ea lorem movet fabulas, mel facete persecuti omittantur ea.
</div>
</div>
</div>
<div class="card">
<a class="collapsed card-header" role="tab" id="headingThree3" data-toggle="collapse" data-parent="#accordionExample" href="#collapseThree3"
aria-expanded="false" aria-controls="collapseThree3">
<h5 class="mb-0">
Header <i class="icon-expand-down"></i>
</h5>
</a>
<div id="collapseThree3" class="collapse" role="tabpanel" aria-labelledby="headingThree3"
data-parent="#accordionExample">
<div class="card-body">
Lorem ipsum dolor sit amet, an summo officiis pericula mea. Prima utamur his ad, ex nec saepe iudico. Putent nostrum ut eum. Harum mentitum eam et. Posse dicat nec at, cu eius delenit fuisset mei. Has errem delenit in, eos prompta vivendo disputando ex, scripta accusata interesset pri an. Dicta bonorum at eos, eos ex etiam bonorum oporteat, labore nusquam aliquando ad mel. Vim ea novum legendos liberavisse, et eos semper sapientem comprehensam, voluptua liberavisse quo at. Nam ea lorem movet fabulas, mel facete persecuti omittantur ea.
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="accordion" id="accordionExample" role="tablist" aria-multiselectable="true">
<div class="card">
<a class="card-header" role="tab" id="headingOne1" data-toggle="collapse" data-parent="#accordionExample" href="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">
<h5 class="mb-0">
Header <i class="icon-expand-down"></i>
</h5>
</a>
<div id="collapseOne1" class="collapse show" role="tabpanel" aria-labelledby="headingOne1"
data-parent="#accordionExample">
<div class="card-body">
</div>
</div>
</div>
<div class="card">
<a class="card-header collapsed" role="tab" id="headingTwo2" data-toggle="collapse" data-parent="#accordionExample" href="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo2">
<h5 class="mb-0">
Header <i class="icon-expand-down"></i>
</h5>
</a>
<div id="collapseTwo2" class="collapse" role="tabpanel" aria-labelledby="headingTwo2"
data-parent="#accordionExample">
<div class="card-body">
</div>
</div>
</div>
<div class="card">
<a class="collapsed card-header" role="tab" id="headingThree3" data-toggle="collapse" data-parent="#accordionExample" href="#collapseThree3" aria-expanded="false" aria-controls="collapseThree3">
<h5 class="mb-0">
Header <i class="icon-expand-down"></i>
</h5>
</a>
<div id="collapseThree3" class="collapse" role="tabpanel" aria-labelledby="headingThree3"
data-parent="#accordionExample">
<div class="card-body">
</div>
</div>
</div>
</div></script></code></pre>
</div>
</div>
</form>
</div>
</div>
<script>
$('.accordion .card').click(function(e) {
if (
$(this)
.find('.collapse')
.hasClass('show')
) {
e.stopPropagation();
}
});
</script> |