Table of Contents

General guidelines

The first item section is open by default.
Only one accordion item section is open at any time.
An open item section is stretched to its maximum possible height (not limited to its content), pushing items sections below it to the bottom of the container.

...

Header

The header contains:

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

Content panel

The open section has no maximum height. However, it 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.
The open section height should be a minimum of 3 text rows.
The width of an accordion can vary depending on the content, layout, and page design.

...

The first content section in the accordion should be open when first loading the page.

Section Header States

State	Open	Closed
Regular	NA	Image Modified
Hover	Image Added	Image Modified
Active

SelectedFocus

Image Added

Image Modified

Focus

Selected	Image Added	NA
Focus	NA	Image Added
Focus Selected	Image Added	Image Added

Section Header States - Special Cases

State	Image	Comment
Changed content mark	Image Modified
Section header with checkbox	Image Modified
Section header with warning

Image Removed

Image Added

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

Zeplin link

Description

Screen thumbnail

https://zpl.io/V04WW99

Image Removed

Code

...

sanitize	false

...

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 When focus is on an accordion header, moves focus to the next accordion header. When focus is on last accordion header, moves focus to first accordion header. Up When focus is on an accordion header, moves focus to the previous accordion header. When focus is on first accordion header, moves focus to last accordion header.
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

Zeplin link

Screen thumbnail

https://zpl.io/V04WW99

Image Added

Code

Html macro

sanitize	false

<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.
							        <h5 class="mb-0"></div>
							          Header <i class="icon-expand-down"></i></div>
							
							        </h5>div>
							      </a>
<div class="card">
							     <div id="collapseOne1"<a class="collapsecollapsed showcard-header" role="tabpaneltab" aria-labelledbyid="headingOne1"
							     headingThree3" data-toggle="collapse" data-parent="#accordionExample"> href="#collapseThree3"
							      <div  classaria-expanded="false"card-body aria-controls="collapseThree3">
							      </div> 							    </div>
							  </div><h5 class="mb-0">
							    <div       Header <i class="card">icon-expand-down"></i>
							      <a class="card-header collapsed" role="tab" id="headingTwo2" data-toggle="collapse" data-parent="#accordionExample" href="#collapseTwo2" </h5>
							      </a>
							    <div id="collapseThree3"   aria-expandedclass="collapse" role="falsetabpanel" aria-controlslabelledby="collapseTwo2headingThree3">
							        <h5 classdata-parent="mb-0#accordionExample">
							    	      Header <i<div class="iconcard-expand-down"></i>body">
							      	Lorem ipsum </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">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.
							          Header <i class="icon-expand-down"></i>
		</div>
					    		    </h5>div>
							      </a>div>
							    <div id="collapseThree3" class="collapse" role="tabpanel" aria-labelledby="headingThree3"
</div>
							      data-parent="#accordionExample">
	</div>
						      <div class="cardcol-lg-body6">
							<pre class="language-html"><code><script type="prism-html-markup"><div class="accordion" id="accordionExample" role="tablist" aria-multiselectable="true">
  <div class="card">
 </div> 							  <a  </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="collapseOne1class="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">
      <h5<div class="mbcard-0body">
      </div>
  Header <i class="icon-expand-down"></i> </div>
  </div>
   </h5><div class="card">
    </a>
    <div<a class="card-header collapsed" role="tab" id="collapseOne1headingTwo2" classdata-toggle="collapse show" role="tabpanel" data-parent="#accordionExample" href="#collapseTwo2" aria-expanded="false" aria-labelledbycontrols="headingOne1collapseTwo2">
      <h5 data-parentclass="#accordionExamplemb-0">
        Header <div<i class="cardicon-expand-bodydown">></i>
      </div>h5>
    </div>a>
  </div>
  <div classid="card">
    <acollapseTwo2" class="card-header collapsedcollapse" role="tabtabpanel" idaria-labelledby="headingTwo2" data-toggle="collapse" data-parent="#accordionExample" href="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo2
      data-parent="#accordionExample">
      <h5<div class="mbcard-0body">
      </div>
  Header <i class="icon-expand-down"></i> </div>
  </div>
   </h5><div class="card">
    </a>
    <div id="collapseTwo2" class="collapse" role="tabpanel" aria-labelledby="headingTwo2"<a class="collapsed card-header" role="tab" id="headingThree3" data-toggle="collapse" data-parent="#accordionExample" href="#collapseThree3" aria-expanded="false" aria-controls="collapseThree3">
      <h5 data-parentclass="#accordionExamplemb-0">
        Header <div<i class="cardicon-expand-bodydown">></i>
      </div>h5>
    </div>a>
  </div>
  <div classid="card">
    <acollapseThree3" class="collapsed card-headercollapse" role="tab" id="headingThree3" data-toggle="collapse" data-parent="#accordionExample" href="#collapseThree3" aria-expanded="false" aria-controls="collapseThree3tabpanel" aria-labelledby="headingThree3"
      data-parent="#accordionExample">
      <h5<div class="mbcard-0body">
      </div>
  Header <i class="icon-expand-down"></i> </div>
  </div>
   </h5>
    </a>
    <div id="collapseThree3" class="collapse" role="tabpanel" aria-labelledby="headingThree3"
      data-parent="#accordionExample">
</div></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>

<script>
$('.accordion .card').click(function(e) {
		  if (
		    $(this)
		      <div class="card-body">.find('.collapse')
		       </div>.hasClass('show')
		  ) {
		 </div>   </div>
</div></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>e.stopPropagation();
		  }
		});
</script>

Version	Old Version 33	New Version Current
Changes made by	Liav Nadler	Hasitha Jayarathne
Saved on	Aug 02, 2020	Dec 24, 2024

Content Comparison

Versions Compared

Key

General guidelines

Section Header States

Section Header States - Special Cases

Interaction

Best practices

Focus management

Code

Design

Code