Accordion

<quiet-accordion>

stable

since 1.0

A container for content that expands and collapses when selected.

Accordions follow the ARIA APG accordion pattern for accessibility. They are comprised of two different components. A single accordion surrounds one or more accordion items.

What is a cat?

A cat is a small, independent feline companion known for their purring, hunting skills, and tendency to knock things off tables. They're perfect for providing endless entertainment, companionship, and the occasional hairball surprise.

When should I adopt one?

Adopt a cat when you're ready for a lifetime commitment of love, responsibility, and being owned by a furry overlord. They're ideal when you need a companion who will judge your life choices while simultaneously demanding treats.

Cat care best practices

Essential cat care includes keeping litter boxes clean and accessible, providing scratching posts to save your furniture, scheduling regular vet checkups, and ensuring they have cozy hiding spots and sunny windowsills for optimal feline happiness.

<quiet-accordion>
  <quiet-accordion-item>
    <span slot="label">What is a cat?</span>
    <p>A cat is a small, independent feline companion known for their purring, hunting skills, and tendency to knock things off tables. They're perfect for providing endless entertainment, companionship, and the occasional hairball surprise.</p>
  </quiet-accordion-item>

  <quiet-accordion-item>
    <span slot="label">When should I adopt one?</span>
    <p>Adopt a cat when you're ready for a lifetime commitment of love, responsibility, and being owned by a furry overlord. They're ideal when you need a companion who will judge your life choices while simultaneously demanding treats.</p>
  </quiet-accordion-item>

  <quiet-accordion-item>
    <span slot="label">Cat care best practices</span>
    <p>Essential cat care includes keeping litter boxes clean and accessible, providing scratching posts to save your furniture, scheduling regular vet checkups, and ensuring they have cozy hiding spots and sunny windowsills for optimal feline happiness.</p>
  </quiet-accordion-item>
</quiet-accordion>

Examples Jump to heading

Providing content Jump to heading

Use the label attribute to provide a plain text label. To provide icons and other HTML, use the label slot instead.

Cats purr for many reasons including contentment, self-healing, and communication. It's their built-in happiness meter!

Kneading is a comfort behavior from kittenhood when they kneaded their mother's belly for milk. Adult cats knead when they're happy and relaxed.

Cat behavior mysteries

From zoomies at 3 AM to bringing you "gifts" of dead mice, cats are wonderfully mysterious creatures with behaviors that keep us guessing.

<quiet-accordion>
  <quiet-accordion-item label="Why do cats purr?">
    <p>Cats purr for many reasons including contentment, self-healing, and communication. It's their built-in happiness meter!</p>
  </quiet-accordion-item>

  <quiet-accordion-item label="Why do cats knead with their paws?">
    <p>Kneading is a comfort behavior from kittenhood when they kneaded their mother's belly for milk. Adult cats knead when they're happy and relaxed.</p>
  </quiet-accordion-item>

  <quiet-accordion-item>
    <quiet-icon slot="label" name="cat"></quiet-icon>
    <span slot="label">Cat behavior mysteries</span>
    <p>From zoomies at 3 AM to bringing you "gifts" of dead mice, cats are wonderfully mysterious creatures with behaviors that keep us guessing.</p>
  </quiet-accordion-item>
</quiet-accordion>

Expanded initially Jump to heading

Add the expanded attribute to any accordion item that should be expanded initially.

What is a cat?

When should I adopt one?

Cat care best practices

<quiet-accordion>
  <quiet-accordion-item expanded>
    <span slot="label">What is a cat?</span>
    <p>A cat is a small, independent feline companion known for their purring, hunting skills, and tendency to knock things off tables. They're perfect for providing endless entertainment, companionship, and the occasional hairball surprise.</p>
  </quiet-accordion-item>

  <quiet-accordion-item>
    <span slot="label">When should I adopt one?</span>
    <p>Adopt a cat when you're ready for a lifetime commitment of love, responsibility, and being owned by a furry overlord. They're ideal when you need a companion who will judge your life choices while simultaneously demanding treats.</p>
  </quiet-accordion-item>

  <quiet-accordion-item>
    <span slot="label">Cat care best practices</span>
    <p>Essential cat care includes keeping litter boxes clean and accessible, providing scratching posts to save your furniture, scheduling regular vet checkups, and ensuring they have cozy hiding spots and sunny windowsills for optimal feline happiness.</p>
  </quiet-accordion-item>
</quiet-accordion>

Changing the appearance Jump to heading

Set the appearance attribute to normal, contained, separated, or unstyled to control the accordion's appearance.

Normal

Contained

Separated

Unstyled

What is a cat?

When should I adopt one?

Cat care best practices

<div id="accordion__appearance">
  <quiet-radio label="Appearance" value="normal">
    <quiet-radio-item value="normal">Normal</quiet-radio-item>
    <quiet-radio-item value="contained">Contained</quiet-radio-item>
    <quiet-radio-item value="separated">Separated</quiet-radio-item>
    <quiet-radio-item value="unstyled">Unstyled</quiet-radio-item>
  </quiet-radio>

  <quiet-accordion>
    <quiet-accordion-item expanded>
      <span slot="label">What is a cat?</span>
      <p>A cat is a small, independent feline companion known for their purring, hunting skills, and tendency to knock things off tables. They're perfect for providing endless entertainment, companionship, and the occasional hairball surprise.</p>
    </quiet-accordion-item>

    <quiet-accordion-item>
      <span slot="label">When should I adopt one?</span>
      <p>Adopt a cat when you're ready for a lifetime commitment of love, responsibility, and being owned by a furry overlord. They're ideal when you need a companion who will judge your life choices while simultaneously demanding treats.</p>
    </quiet-accordion-item>

    <quiet-accordion-item>
      <span slot="label">Cat care best practices</span>
      <p>Essential cat care includes keeping litter boxes clean and accessible, providing scratching posts to save your furniture, scheduling regular vet checkups, and ensuring they have cozy hiding spots and sunny windowsills for optimal feline happiness.</p>
    </quiet-accordion-item>
  </quiet-accordion>
</div>

<script>
  const container = document.getElementById('accordion__appearance');
  const accordion = container.querySelector('quiet-accordion');
  const radio = container.querySelector('quiet-radio');

  radio.addEventListener('input', () => {
    accordion.appearance = radio.value;
  });
</script>

<style>
  #accordion__appearance {
    quiet-radio {
      margin-block-end: 2rem;
    }
  }
</style>

Changing the size Jump to heading

Accordions are sized based on the current font size. To change their size, set the font-size on the accordion or an ancestor element.

Cats purr for many reasons including contentment, self-healing, and communication. It's their built-in happiness meter!

Cats spend 30-50% of their day grooming themselves to stay clean, regulate temperature, and reduce stress.

Cats sleep 12-16 hours a day because they're natural predators who conserve energy for hunting (even if they're just hunting dust bunnies).

<quiet-accordion style="font-size: 1.25rem;">
  <quiet-accordion-item label="Why do cats purr?">
    <p>Cats purr for many reasons including contentment, self-healing, and communication. It's their built-in happiness meter!</p>
  </quiet-accordion-item>

  <quiet-accordion-item label="Cat grooming habits">
    <p>Cats spend 30-50% of their day grooming themselves to stay clean, regulate temperature, and reduce stress.</p>
  </quiet-accordion-item>

  <quiet-accordion-item label="Why do cats sleep so much?">
    <p>Cats sleep 12-16 hours a day because they're natural predators who conserve energy for hunting (even if they're just hunting dust bunnies).</p>
  </quiet-accordion-item>
</quiet-accordion>

Disabling items Jump to heading

Use the disabled attribute to prevent users from expanding certain accordion items. This is useful for sections that require certain conditions to be met before they can be accessed.

Indoor cats live longer, safer lives and are protected from outdoor dangers like traffic, predators, and diseases.

This section about outdoor cats is disabled until you've completed the indoor cat safety course.

Senior cats need extra attention with diet, comfort, and regular health monitoring as they age gracefully.

<quiet-accordion>
  <quiet-accordion-item label="Indoor cats">
    <p>Indoor cats live longer, safer lives and are protected from outdoor dangers like traffic, predators, and diseases.</p>
  </quiet-accordion-item>

  <quiet-accordion-item label="Outdoor cats" disabled>
    <p>This section about outdoor cats is disabled until you've completed the indoor cat safety course.</p>
  </quiet-accordion-item>

  <quiet-accordion-item label="Senior cat care">
    <p>Senior cats need extra attention with diet, comfort, and regular health monitoring as they age gracefully.</p>
  </quiet-accordion-item>
</quiet-accordion>

Auto-collapsing Jump to heading

By default, multiple accordion items can be expanded at the same time. Add the auto-collapse attribute to ensure only one item is expanded at a time.

When auto-collapse is enabled, opening another section will automatically close this one. Kittens need frequent feeding, socialization, and lots of love!

Click me to see the kitten section collapse automatically. Adult cats are more independent but still need daily attention and care.

Only one cat life stage can be discussed at a time with auto-collapse enabled. Senior cats deserve extra comfort and patience.

<quiet-accordion auto-collapse>
  <quiet-accordion-item label="Kitten care" expanded>
    <p>When auto-collapse is enabled, opening another section will automatically close this one. Kittens need frequent feeding, socialization, and lots of love!</p>
  </quiet-accordion-item>

  <quiet-accordion-item label="Adult cat care">
    <p>Click me to see the kitten section collapse automatically. Adult cats are more independent but still need daily attention and care.</p>
  </quiet-accordion-item>

  <quiet-accordion-item label="Senior cat care">
    <p>Only one cat life stage can be discussed at a time with auto-collapse enabled. Senior cats deserve extra comfort and patience.</p>
  </quiet-accordion-item>
</quiet-accordion>

Changing the icon placement Jump to heading

Set the icon-placement to start to render the icon on the front of the header.

Cats sleep 12-16 hours a day because they're natural predators who conserve energy for hunting (even if they're just hunting dust bunnies).

Yes! Cats experience REM sleep and likely dream about hunting, playing, or plotting world domination.

<quiet-accordion icon-placement="start">
  <quiet-accordion-item label="Why do cats sleep so much?">
    <p>Cats sleep 12-16 hours a day because they're natural predators who conserve energy for hunting (even if they're just hunting dust bunnies).</p>
  </quiet-accordion-item>

  <quiet-accordion-item label="Do cats dream?">
    <p>Yes! Cats experience REM sleep and likely dream about hunting, playing, or plotting world domination.</p>
  </quiet-accordion-item>
</quiet-accordion>

Customizing the icon Jump to heading

The expand/collapse icon can be customized by slotting in your own icon. If you don't want the default rotation, target the icon part and set the rotate property to a custom rotation angle.

Cats communicate through meowing, purring, chirping, and the infamous slow blink of love.

A cat's tail, ears, and posture tell you everything about their mood - from happy to "I'm plotting your demise."

<quiet-accordion id="accordion__custom-icon">
  <quiet-accordion-item label="Cat communication">
    <quiet-icon slot="icon" name="chevron-right"></quiet-icon>
    <p>Cats communicate through meowing, purring, chirping, and the infamous slow blink of love.</p>
  </quiet-accordion-item>

  <quiet-accordion-item label="Cat body language">
    <quiet-icon slot="icon" name="chevron-right"></quiet-icon>
    <p>A cat's tail, ears, and posture tell you everything about their mood - from happy to "I'm plotting your demise."</p>
  </quiet-accordion-item>
</quiet-accordion>

<style>
  #accordion__custom-icon {
    quiet-accordion-item::part(icon) {
      rotate: 0deg;
    }

    quiet-accordion-item:state(expanded)::part(icon) {
      rotate: 90deg;
    }
  }
</style>

A common way to style accordion icons is with plus and minus icons. For this, you can toggle which icon shows when the accordion item is expanded using the :state(expanded) CSS selector.

From fluffy Maine Coons to hairless Sphynx cats, there are over 40 recognized cat breeds, each with their own personality traits.

Cats come in amazing colors and patterns like tabby, calico, tuxedo, and tortoiseshell - nature's own art gallery!

<quiet-accordion id="accordion__plus-minus">
  <quiet-accordion-item label="Cat breeds">
    <quiet-icon slot="icon" name="plus" class="plus"></quiet-icon>
    <quiet-icon slot="icon" name="minus" class="minus"></quiet-icon>
    <p>From fluffy Maine Coons to hairless Sphynx cats, there are over 40 recognized cat breeds, each with their own personality traits.</p>
  </quiet-accordion-item>

  <quiet-accordion-item label="Cat colors and patterns">
    <quiet-icon slot="icon" name="plus" class="plus"></quiet-icon>
    <quiet-icon slot="icon" name="minus" class="minus"></quiet-icon>
    <p>Cats come in amazing colors and patterns like tabby, calico, tuxedo, and tortoiseshell - nature's own art gallery!</p>
  </quiet-accordion-item>
</quiet-accordion>

<style>
  #accordion__plus-minus .minus {
    display: none;
  }

  /* When expanded: hide plus and show minus */
  #accordion__plus-minus quiet-accordion-item:state(expanded) .plus {
    display: none;
  }

  #accordion__plus-minus quiet-accordion-item:state(expanded) .minus {
    display: block;
  }
</style>

Customizing label content Jump to heading

Accordions can have structured content as labels, but consider the experience for screen reader users. You may want to add aria-hidden="true' to decorative elements supplementary text that don't add meaningful context when the accordion is navigated with assistive technology.

Meowy McGee

A philosophical feline with a rebellious streak, Meowy spends their days contemplating the deeper meaning of cardboard boxes and refusing to acknowledge the concept of "off-limits" furniture. When not busy knocking things off counters with purposeful intent, they can be found staring intensely at walls, presumably seeing things the rest of us mere mortals cannot.

Lady Pawington

The epitome of feline sophistication, Lady Pawington has mastered the art of finding the perfect sunbeam at precisely 2:47 PM every day. She maintains a rigorous schedule of 16-hour power naps, interrupted only by brief but important meetings with her food bowl and the occasional judgmental stare at the humans who dare to disturb her royal slumber.

Sir Whiskertons III

A distinguished gentleman cat with an insatiable appetite for adventure (and treats), Sir Whiskertons approaches each day like it's his personal buffet of experiences. Whether he's conducting important business meetings with dust bunnies under the couch or hosting diplomatic summits with the neighborhood squirrels from his window perch, he does it all with the confidence of someone who knows they've got eight lives in reserve.

<quiet-accordion appearance="contained" auto-collapse id="accordion__styling">
  <quiet-accordion-item>
    <div slot="label">
      <quiet-avatar image="https://images.unsplash.com/photo-1672487209629-4d52e0c043d0?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></quiet-avatar>
      <div>
        Meowy McGee
        <p aria-hidden="true"><small>Freedom's just another word for nothing left to lose</small></p>
      </div>
    </div>
    <p>
      A philosophical feline with a rebellious streak, Meowy spends their days contemplating the deeper meaning of cardboard boxes and refusing to acknowledge the concept of "off-limits" furniture. When not busy knocking things off counters with purposeful intent, they can be found staring intensely at walls, presumably seeing things the rest of us mere mortals cannot.
    </p>
  </quiet-accordion-item>

  <quiet-accordion-item>
    <div slot="label">
      <quiet-avatar image="https://images.unsplash.com/photo-1516310789627-2ff305829fbb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></quiet-avatar>
      <div>
        Lady Pawington
        <p aria-hidden="true"><small>Professional sunbeam chaser and nap enthusiast</small></p>
      </div>
    </div>
    <p>
      The epitome of feline sophistication, Lady Pawington has mastered the art of finding the perfect sunbeam at precisely 2:47 PM every day. She maintains a rigorous schedule of 16-hour power naps, interrupted only by brief but important meetings with her food bowl and the occasional judgmental stare at the humans who dare to disturb her royal slumber.
    </p>
  </quiet-accordion-item>

  <quiet-accordion-item>
    <div slot="label">
      <quiet-avatar image="https://images.unsplash.com/photo-1569591159212-b02ea8a9f239?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></quiet-avatar>
      <div>
        Sir Whiskertons III
        <p aria-hidden="true"><small>Living all nine lives to the fullest, one treat at a time</small></p>
      </div>
    </div>
    <p>
      A distinguished gentleman cat with an insatiable appetite for adventure (and treats), Sir Whiskertons approaches each day like it's his personal buffet of experiences. Whether he's conducting important business meetings with dust bunnies under the couch or hosting diplomatic summits with the neighborhood squirrels from his window perch, he does it all with the confidence of someone who knows they've got eight lives in reserve.
    </p>
  </quiet-accordion-item>
</quiet-accordion>

<style>
  #accordion__styling {
    div[slot="label"] {
      display: flex;
      align-items: center;
      gap: 1rem;

      p {
        line-height: 1.2;
      }
    }

  }
</style>

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN

npm

To manually import <quiet-accordion> from the CDN, use the following code.

import 'https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.0.0/dist/components/accordion/accordion.js';

To manually import <quiet-accordion> from npm, use the following code.

import '@quietui/quiet/dist/components/accordion/accordion.js';

Slots Jump to heading

Accordion supports the following slots. Learn more about using slots

Name	Description
(default)	One or more `<quiet-accordion-item>` elements to place in the accordion.

Properties Jump to heading

Accordion has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Property / Attribute	Description	Type	Default
`autoCollapse` `auto-collapse`	When set, selecting an accordion item will automatically collapse the others.	`boolean`	`false`
`appearance`	Determines the accordion's appearance.	`'normal' 'contained' 'separated' 'unstyled'`	`'normal'`
`iconPlacement` `icon-placement`	Determines which side of the accordion item the expand/collapse icon shows.	`'start' 'end'`	`'end'`

Events Jump to heading

Accordion dispatches the following custom events. You can listen to them the same way was native events. Learn more about custom events

Name	Description
`quiet-before-expand`	Emitted when an accordion item is instructed to expand but before it is shown. Calling `event.preventDefault()` will prevent the item from expanding. `event.detail.item` will contain the expanding item.
`quiet-expand`	Emitted after an accordion item has been expanded. `event.detail.item` will contain the expanded item.
`quiet-before-collapse`	Emitted when an accordion item is instructed to collapse but before it is hidden. Calling `event.preventDefault()` will prevent the item from collapsing. `event.detail.item` will contain the collapsing item.
`quiet-collapse`	Emitted after an accordion item has been collapsed. `event.detail.item` will contain the collapsed item.

CSS custom properties Jump to heading

Accordion supports the following CSS custom properties. You can style them like any other CSS property. Learn more about CSS custom properties

Name	Description	Default
`--duration`	The expand and collapse duration.	`200ms`
`--easing`	The expand and collapse easing.	`ease`
`--border-color`	The accordion's border color.	`var(--quiet-neutral-stroke-softer)`
`--border-width`	The accordion's border width.	`var(--quiet-border-width)`
`--border-style`	The accordion's border style.	`var(--quiet-border-style)`
`--border-radius`	The border radius to apply to rounded edges.	`var(--quiet-border-radius-md)`

Dependencies Jump to heading

Accordion automatically imports the following elements. Sub-dependencies are also included in this list.

Accordion

Examples Jump to heading #

Providing content Jump to heading #

Expanded initially Jump to heading #

Changing the appearance Jump to heading #

Changing the size Jump to heading #

Disabling items Jump to heading #

Auto-collapsing Jump to heading #

Changing the icon placement Jump to heading #

Customizing the icon Jump to heading #

Customizing label content Jump to heading #

API Jump to heading #

Importing Jump to heading #

Slots Jump to heading #

Properties Jump to heading #

Events Jump to heading #

CSS custom properties Jump to heading #

Dependencies Jump to heading #

Examples Jump to heading

Providing content Jump to heading

Expanded initially Jump to heading

Changing the appearance Jump to heading

Changing the size Jump to heading

Disabling items Jump to heading

Auto-collapsing Jump to heading

Changing the icon placement Jump to heading

Customizing the icon Jump to heading

Customizing label content Jump to heading

API Jump to heading

Importing Jump to heading

Slots Jump to heading

Properties Jump to heading

Events Jump to heading

CSS custom properties Jump to heading

Dependencies Jump to heading