| Table of Contents |
|---|
...
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 Check Box 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.
...
The first content section in the accordion should be open when first loading the page.
Section Header States
State | Open | Closed | Comment |
|---|---|---|---|
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 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 previously-open section should close automatically.
When closing an open section, the section beneath it should open automatically. Closing the last section in the accordion should automatically open the section directly above it.
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.
...
Selected sections should slide open, while the previously-open section slides closed at the same time. (see Code section below)
Best practices
Use:
where 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.
...
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.
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
...
Keyboard |
|---|
Description |
|---|
Screen thumbnail
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> |
...