Accordions

Flexbox Accordions

Sample #1 Latest performance test results sample. This kind of data is used on projects like Hummingbird.

Recommendation

Score / 100

Type

Item

More info on something

Item content – Hello!

Recommendation

Score / 100

Type

Item

More info on something

Item content – Hello!

Item

More info on something

Item content – Hello!

Item

More info on something

Item content – Hello!

Item

More info on something

Item content – Hello!

Item

More info on something

Item content – Hello!

Item

More info on something

Item content – Hello!

Sample #2 Enable field and its settings sample. This kind of data is used on projects like Forminator.

Item

Item content – Hello!

Item

Item content – Hello!

Item

Item content – Hello!

Sample #3 On some projects you gonna need to make accordion fill the entire box. We call this flushed accordion and can be achieved including sui-accordion-flushed class and works better when you place it outside sui-box-body as another box element.

Recommendation

Score / 100

Type

Item

More info on something

Item content – Hello!

Item

More info on something

Item content – Hello!

Item

More info on something

Item content – Hello!

Table Accordions

Sample #1 Latest performance test results sample. This kind of data is used on projects like Hummingbird.

Recommendation	Score / 100	Type
Item		More info on something.
Item content – Hello!
Item		More info on something.
Item content – Hello!
Item		More info on something.
Item content – Hello!
Item		More info on something.
Item content – Hello!

Sample #2 Enable field and its settings sample. This kind of data is used on projects like Forminator.

Item

Item content – Hello!

Item

Item content – Hello!

Item

Item content – Hello!

Sample #3 For flushed accordions using tables, it's gonna be defined by table class not accordion. In this case you gonna need to do this: <table class="sui-table sui-table-flushed sui-accordion">.

Recommendation Score / 100 Type

Item

More info on something.

Title A	Title B	Title C
Name
Name
Name

Item

More info on something.

Item content – Hello!

Item

More info on something.

Item content – Hello!

Documentation

If you are using individual js components, accordion.js is required.

If you want to perform some actions, like open a menu or adding a link, inside accordion items header remember to add sui-accordion-item-action to the element, that way when user clicks on the item it won't open/close the accordion but instead perform the action you want to like openning a dropdown menu with more options.

Flexbox Accordions

<div class="sui-accordion">

	<div class="sui-accordion-header">
		<div>Recommendation</div>
		<div>Score / 100</div>
		<div>Type</div>
	</div>

	<div class="sui-accordion-item">

		<div class="sui-accordion-item-header">
			<div class="sui-accordion-item-title"><span aria-hidden="true" class="sui-icon-warning-alert sui-error"></span> Item</div>
			<div><div class="sui-circle-score sui-grade-f" data-score="8"></div></div>
			<div>More info on something <button class="sui-button-icon sui-accordion-open-indicator" aria-label="Open item"><span class="sui-icon-chevron-down" aria-hidden="true"></span></button></div>
		</div>

		<div class="sui-accordion-item-body">
			<div class="sui-box">
				<div class="sui-box-body">
					<p>Item content – Hello!</p>
				</div>
			</div>
		</div>

	</div>

</div>

Table Accordions

<table class="sui-table sui-accordion">

	<thead>
		<tr>
			<th>Recommendation</th>
			<th>Score / 100</th>
			<th>Type</th>
		</tr>
	</thead>

	<tbody>

		<tr class="sui-accordion-item">
			<td class="sui-table-item-title"><span aria-hidden="true" class="sui-icon-warning-alert sui-error"></span> Item</td>
			<td><div class="sui-circle-score sui-grade-f" data-score="6"></div></td>
			<td>More info on something. <button class="sui-button-icon sui-accordion-open-indicator" aria-label="Expand"><span class="sui-icon-chevron-down" aria-hidden="true"></span></button></td>
		</tr>

		<tr class="sui-accordion-item-content">
			<td colspan="3">
				<div class="sui-box">
					<div class="sui-box-body">
						<p>Item content – Hello!</p>
					</div>
				</div>
			</td>
		</tr>

	</tbody>

</table>

Accordion Blocks

<div class="sui-accordion sui-accordion-block">

	<div class="sui-accordion-item">

		<!-- Item header -->
		<div class="sui-accordion-item-header">

			<div class="sui-accordion-item-title sui-trim-title">Title <span class="sui-tag sui-tag-blue">Published</span></div>

			<div class="sui-accordion-item-date"><strong>Last Submission</strong> March 11, 2017 @ 10:18am</div>

			<div class="sui-accordion-col-auto">
				<button class="sui-button sui-button-ghost sui-accordion-item-action"><span class="sui-icon-pencil" aria-hidden="true"></span> Edit</button>
				<div class="sui-dropdown sui-accordion-item-action">
					<a href="#" class="sui-dropdown-anchor sui-icon-widget-settings-config" aria-label="Open Item Settings"></a>
					<ul>
						<li><a href=""><span class="sui-icon-eye" aria-hidden="true"></span> Preview</a></li>
						<li><a href=""><span class="sui-icon-community-people" aria-hidden="true"></span> View</a></li>
						<li><a href=""><span class="sui-icon-page-multiple" aria-hidden="true"></span> Duplicate</a></li>
						<li><a href=""><span class="sui-icon-cloud-migration" aria-hidden="true"></span> Export</a></li>
						<li><a href=""><span class="sui-icon-trash" aria-hidden="true"></span> Delete</a></li>
					</ul>
				</div>
				<button class="sui-button-icon sui-accordion-open-indicator" aria-label="Open Item"><span class="sui-icon-chevron-down" aria-hidden="true"></span></button>
			</div>

		</div>

		<!-- Item content -->
		<div class="sui-accordion-item-body">Your content goes here</div>

	</div>

</div>

Disabled Item Disable the row and prevent from opening.

Disable a flexbox accordion item:

<div class="sui-accordion-item"> ... </div>
<div class="sui-accordion-item"> ... </div>
<div class="sui-accordion-item sui-accordion-item--disabled"> ... </div>

Disable a table accordion item:

<tbody>
	<tr class="sui-accordion-item sui-accordion-item--disabled"> ... </tr>
	<tr class="sui-accordion-item-content"> ... </tr>
</tbody>