Accordions
Accordion
Use an accordion to collapse sections of content under a heading. The content below the summary should be contained in a single div but, within that div, you can include any content you want.
Accordions use the details element to toggle visibility of the content when the summary element is clicked on. However, if you need all other accordions to collapse when another is opened, you’d need to do that with JavaScript.
You can have other accordions in the same group close automatically when another is selected by assigning each details element in the group the same name attribute.
Example
A group of accordions.
Billing Class
Institutional
In-patient and out-patient rates from hospitals or healthcare organizations. Recommended default source option.
Professional
Medical service and treatment rates from physicians or healthcare professionals. Much larger database, but could increase the size of the extract considerably.
Providers
New York
Metro Areas / CBSAs
Allopathic & Osteopathic Physicians
Emergency Medicine
All specializations
Family Medicine
All specializations
HTML
<div class="pv-bordered">
<details class="pv-accordion">
<summary>Billing Class</summary>
<div>
<div class="pv-bordered">
<div class="pv-border-bottom pv-inset-square-8 pv-text-body-xs">
<p class="pv-text-title-xs">Institutional</p>
<p class="pv-text-subdued">In-patient and out-patient rates from hospitals or healthcare organizations. Recommended default source option.</p>
</div>
<div class="pv-inset-square-8 pv-text-body-xs">
<p class="pv-text-title-xs">Professional</p>
<p class="pv-text-subdued">Medical service and treatment rates from physicians or healthcare professionals. Much larger database, but could increase the size of the extract considerably.</p>
</div>
</div>
</div>
</details>
<details class="pv-accordion">
<summary>Providers</summary>
<div>
<div class="pv-bordered">
<p class="pv-border-bottom pv-surface-accent pv-inset-square-8 pv-text-title-xs">New York</p>
<div class="pv-inset-square-8 pv-text-body-xs pv-border-bottom">
<p class="pv-text-title-xs pv-stack-4">Metro Areas / CBSAs</p>
<div class="pv-flex" style="--flex-gap: 4px; --flex-wrap: wrap">
<span class="pv-tag">New York, NY</span>
<span class="pv-tag">Brooklyn, NY</span>
<span class="pv-tag">Mineola, NY</span>
<span class="pv-tag">Astoria, NY</span>
</div>
</div>
<p class="pv-border-bottom pv-surface-accent pv-inset-square-8 pv-text-title-xs">Allopathic & Osteopathic Physicians</p>
<div class="pv-inset-square-8 pv-text-body-xs pv-border-bottom">
<p class="pv-text-title-xs pv-stack-4">Emergency Medicine</p>
<p class="pv-text-body-xs pv-text-subdued">All specializations</p>
</div>
<div class="pv-inset-square-8 pv-text-body-xs">
<p class="pv-text-title-xs pv-stack-4">Family Medicine</p>
<p class="pv-text-body-xs pv-text-subdued">All specializations</p>
</div>
</div>
</div>
</details>
</div>Dark Accordion
The dark accordion has a dark background for the summary element but the background of the content remains white.
Example
A dark accordion.
Billing Class
Institutional
In-patient and out-patient rates from hospitals or healthcare organizations. Recommended default source option.
Professional
Medical service and treatment rates from physicians or healthcare professionals. Much larger database, but could increase the size of the extract considerably.
HTML
<div class="pv-bordered">
<details class="pv-accordion-dark">
<summary>Billing Class</summary>
<div>
<div class="pv-bordered">
<div class="pv-border-bottom pv-inset-square-8 pv-text-body-xs">
<p class="pv-text-title-xs">Institutional</p>
<p class="pv-text-subdued">In-patient and out-patient rates from hospitals or healthcare organizations. Recommended default source option.</p>
</div>
<div class="pv-inset-square-8 pv-text-body-xs">
<p class="pv-text-title-xs">Professional</p>
<p class="pv-text-subdued">Medical service and treatment rates from physicians or healthcare professionals. Much larger database, but could increase the size of the extract considerably.</p>
</div>
</div>
</div>
</details>
</div>Transparent Accordion
The transparent accordion has a transparent background for the summary content container. Primarily intended for use on the brand-gradient background.
Example
A transparent accordion.
Exploring 42 contracts based on current filters. Hide Filters
- Payers
- Humaetna ASC Atlantis, Humaetna ASC Raccoon City, Humaetna of Metropolis, Insura of Gotham City
- Plans
- HMO, PPO, POS
- Providers
- Cherry Creek Hospital, Central Hospital of Cherry Creek, Healthy Hills ACO
- Status
- All
- Labels
- All
HTML
<div class="pv-surface-brand-gradient pv-text-inverse pv-inset-square">
<details class="pv-accordion-transparent">
<summary class="pv-space-between">
<span class="pv-text-subdued-inverse">Exploring 42 contracts based on current filters.</span>
<span class="pv-text-brand-inverse"><strong>Hide Filters</strong></span>
</summary>
<dl class="pv-border-flow">
<div class="pv-inset-squish-8">
<dt>Payers</dt>
<dd>Humaetna ASC Atlantis, Humaetna ASC Raccoon City, Humaetna of Metropolis, Insura of Gotham City</dd>
</div>
<div class="pv-inset-squish-8">
<dt>Plans</dt>
<dd>HMO, PPO, POS</dd>
</div>
<div class="pv-inset-squish-8">
<dt>Providers</dt>
<dd>Cherry Creek Hospital, Central Hospital of Cherry Creek, Healthy Hills ACO</dd>
</div>
<div class="pv-inset-squish-8">
<dt>Status</dt>
<dd>All</dd>
</div>
<div class="pv-inset-squish-8">
<dt>Labels</dt>
<dd>All</dd>
</div>
</dl>
</details>
</div>Details
Use details to align more closely with the default style of the details element.
Example
A details element.
Add Common Tags
HTML
<details class="pv-details">
<summary>Add Common Tags</summary>
<div class="pv-flow-8">
<div class="pv-bordered pv-surface pv-inset-square-12">
<div class="pv-flex">
<svg aria-hidden="true" class="pv-icon pv-text-brand">
<title>hash</title>
<use xlink:href="#hash"></use>
</svg>
<span class="pv-text-title-sm">Term Length</span>
</div>
</div>
</div>
</details>