Table of Contents |
---|
Description
An accordion is a list of headers that hide or reveal additional content when selected.
An accordion is similar in purpose to a tabbed interface: a list of items where one item is expanded into a panel at once.
The list items are effectively shortcuts to access separate content sections.
Usage & Behavior
...
An accordion should be used:
To allow users to have control over the content, by expanding what they want to read and hiding what they want to ignore.
Where there’s only a small space in which to display a lot of content.
When wanting to minimize scrolling.
To make lots of content appear less daunting, by allowing the user to focus on one part at a time.
...
The first content section in the accordion should be open when first loading the page.
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 content sections within the constraints of the accordion.
Accordions work especially well where vertical space is limited.
States (TBD - not final design)
State | Image | Comment |
---|---|---|
Section header closed | ||
Section header open | ||
Section header hover | ||
Selected content mark |
...
State | Image | Comment |
---|---|---|
Selected 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.
There's always one section open in the accordion.
Only one section can be open at a time.
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.
Hovering over a section header should show a tooltip with the full name of the section header.
...
Zeplin link | Screen thumbnail |
---|---|
Code
...
Html macro | ||
---|---|---|
| ||
<link rel="stylesheet" href="https://ux.verint.com/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">Accordion</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">
</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>
</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> |