Accessibility: Work in progress

Translations: Not Needed

Migration Guide: Full

Accordion

A collapsible content panel that can be used to show and hide content in an organized way. Content padding to be customized by the dev.

Default

Title 1

Title 2

Vue

<template>
  <HLAccordion>
    <HLAccordionItem title="Title 1" name="1" id="1">
      <div class="p-2">Content for section 1</div>
    </HLAccordionItem>
    <HLAccordionItem title="Title 2" name="2" id="2">
      <div class="p-2">Content for section 2</div>
    </HLAccordionItem>
  </HLAccordion>
</template>
<script setup lang="ts">
  import { HLAccordion, HLAccordionItem } from '@platform-ui/highrise'
</script>

Arrow Placement

Left Arrow

Right Arrow

Vue

<!-- Left Arrow -->
<HLAccordion arrowPlacement="left">
  <HLAccordionItem title="Left Arrow" name="1" id="1">
    <div class="p-2">Content with left arrow</div>
  </HLAccordionItem>
</HLAccordion>

<!-- Right Arrow -->
<HLAccordion arrowPlacement="right">
  <HLAccordionItem title="Right Arrow" name="2" id="2">
    <div class="p-2">Content with right arrow</div>
  </HLAccordionItem>
</HLAccordion>

Border Styles

Default Border

Default Border

Item Border

Item Border

Vue

<!-- Default Border -->
<HLAccordion borderPosition="default">
  <HLAccordionItem title="Default Border" name="1" id="1">
    <div class="p-2">Content with default border - item 1</div>
  </HLAccordionItem>
  <HLAccordionItem title="Default Border" name="2" id="2">
    <div class="p-2">Content with default border - item 2</div>
  </HLAccordionItem>
</HLAccordion>

<!-- Item Border -->
<HLAccordion borderPosition="item">
  <HLAccordionItem title="Item Border" name="2" id="2">
    <div class="p-2">Content with item border - item 1</div>
  </HLAccordionItem>
  <HLAccordionItem title="Item Border" name="3" id="3">
    <div class="p-2">Content with item border - item 2</div>
  </HLAccordionItem>
</HLAccordion>

Sizes

Small Size

Medium Size

Large Size

Vue

<!-- Small Size -->
<HLAccordion size="sm">
  <HLAccordionItem title="Small Size" name="1" id="1">
    <div class="p-2">Small accordion content</div>
  </HLAccordionItem>
</HLAccordion>

<!-- Medium Size (default) -->
<HLAccordion size="md">
  <HLAccordionItem title="Medium Size" name="2" id="2">
    <div class="p-2">Medium accordion content</div>
  </HLAccordionItem>
</HLAccordion>

<!-- Large Size -->
<HLAccordion size="lg">
  <HLAccordionItem title="Large Size" name="3" id="3">
    <div class="p-2">Large accordion content</div>
  </HLAccordionItem>
</HLAccordion>

Disabled

Enabled Item

Disabled Item

Vue

<HLAccordion>
  <HLAccordionItem title="Enabled Item" name="1" id="1">
    <div>This item can be expanded</div>
  </HLAccordionItem>
  <HLAccordionItem title="Disabled Item" name="2" id="2" :disabled="true">
    <div>This item cannot be expanded</div>
  </HLAccordionItem>
</HLAccordion>

No Border

No Border

No Border 2

Vue

<HLAccordion :border="false">
  <HLAccordionItem title="No Border" name="1" id="1">
    <div class="p-2">This item has no border</div>
  </HLAccordionItem>
  <HLAccordionItem title="No Border 2" name="2" id="2">
    <div class="p-2">This item has no border</div>
  </HLAccordionItem>
</HLAccordion>

Multiple Open Panels

Setting the accordion prop to false will allow opening multiple panels at the same time.

Expandable Item

Expandable Item

Expandable Item

Vue

<HLAccordion id="multiple-panels-open" :accordion="false">
  <HLAccordionItem title="Expandable Item" name="1" id="1">
    <div class="p-2">This section can be expanded</div>
  </HLAccordionItem>
  <HLAccordionItem title="Expandable Item" name="2" id="2">
    <div class="p-2">This section can be expanded irrespective of the other sections</div>
  </HLAccordionItem>
  <HLAccordionItem title="Expandable Item" name="3" id="3">
    <div class="p-2">This section can be expanded irrespective of the other sections</div>
  </HLAccordionItem>
</HLAccordion>

Pre-expanded Panels

Pre-expanded Item

This section starts expanded

Collapsed Item

Pre-expanded Item 1

This section starts expanded

Pre-expanded Item 2

This section also starts expanded

Vue

<!-- Single pre-expanded panel -->
<HLAccordion :defaultExpandedNames="['first']">
  <HLAccordionItem title="Pre-expanded Item" name="first" id="1">
    <div class="p-2">This section starts expanded</div>
  </HLAccordionItem>
  <HLAccordionItem title="Collapsed Item" name="second" id="2">
    <div class="p-2">This section starts collapsed</div>
  </HLAccordionItem>
</HLAccordion>
<!-- Multiple pre-expanded panels -->
<HLAccordion :defaultExpandedNames="['first', 'second']" :accordion="false">
  <HLAccordionItem title="Pre-expanded Item 1" name="first" id="1">
    <div class="p-2">This section starts expanded</div>
  </HLAccordionItem>
  <HLAccordionItem title="Pre-expanded Item 2" name="second" id="2">
    <div class="p-2">This section also starts expanded</div>
  </HLAccordionItem>
</HLAccordion>

Custom Title

Header slot

Header Extra

Vue

<HLAccordion>
  <HLAccordionItem name="1" id="1">
    <template #header>
      <div class="p-2 bg-green-50 w-full">Custom Title</div>
    </template>
    <div class="p-2">Content for section 1</div>
  </HLAccordionItem>
</HLAccordion>

Custom Content

Custom Content Example

Vue

<!-- Custom content -->
<HLAccordion>
  <HLAccordionItem title="Rich Content Example" name="2" id="2">
    <div class="p-2">
      <div class="flex gap-4">
        <div class="w-[100px] h-[100px] bg-[#D9D9D9] rounded"></div>
        <div>
          <HLText size="lg" weight="semibold">Content Title</HLText>
          <p>This is an example of rich content with image placeholder and text.</p>
          <HLButton color="blue" variant="primary" size="sm">Action Button</HLButton>
        </div>
      </div>
    </div>
  </HLAccordionItem>
</HLAccordion>

Display Directive

The displayDirective property specifies which Vue directive to use for controlling the visibility of the accordion's content. This choice affects how the content is managed in the DOM, impacting both performance and behavior.

if - When the accordion is collapsed, the content is completely removed from the DOM. It is only added back when the accordion is expanded. This approach is more performant when the content is not needed initially.

show - The content remains in the DOM at all times, but it is hidden from view when the accordion is collapsed. The visibility is toggled using CSS. This approach is more flexible and easier to manage when the content needs to be toggled on and off.

Event Testing

This example shows handling of the @item-header-click event. Click on the header of an accordion item to trigger the @item-header-click event.

Item 1

Item 2

Event Log:

No events logged yet. Try clicking the headers above.

Vue

<script setup>
  const eventLog = ref([])
  const handleHeaderClick = item => {
    eventLog.value.unshift({
      event: 'Header clicked',
      expanded: item.expanded,
      name: item.name,
      timestamp: new Date().toLocaleTimeString(),
    })
    // Keep only last 5 events
    if (eventLog.value.length > 5) {
      eventLog.value.pop()
    }
  }
</script>

<template>
  <HLAccordion @item-header-click="handleHeaderClick">
    <HLAccordionItem title="Item 1" name="1" id="1">
      <div class="p-2">Content for item 1</div>
    </HLAccordionItem>
    <HLAccordionItem title="Item 2" name="2" id="2">
      <div class="p-2">Content for item 2</div>
    </HLAccordionItem>
  </HLAccordion>
  <div class="text-sm">
    <p class="font-bold mb-2">Event Log:</p>
    <div v-if="eventLog.length === 0" class="text-gray-500">No events logged yet. Try clicking the headers above.</div>
    <div v-for="(log, index) in eventLog" :key="index" class="text-gray-700">
      {{ log.timestamp }}: {{ log.event }} - Expanded: {{ log.expanded }} - Name: {{ log.name }}
    </div>
  </div>
</template>

Imports

import { HLAccordion, HLAccordionItem } from '@platform-ui/highrise'

Props

Accordion

Name	Type	Default	Description
id *	string | undefined	undefined	Unique identifier for the accordion
accordion	boolean	true	When set to true, the accordian operates in a traditional manner where only one panel can be open at a time, opening one will close the other. When set to false, the accordian will allow multiple panels to be open at the same time.
arrowPlacement	'left' | 'right'	'right'	Position of the expand/collapse arrow
size	'sm' | 'md' | 'lg'	'md'	Size of the accordion
borderPosition	'default' | 'item'	'default'	Position of the border
border	boolean	true	Display border
defaultExpandedNames	string[] | string | undefined	undefined	Pre-expanded panels that can be collapsed
displayDirective	'if' | 'show'	'if'	Vue directive to use for content display
expandedNames	string[] | string | undefined	undefined	Expanded panels that cannot be collapsed
zeroPadding	boolean	false	Remove padding from accordion items

AccordionItem

Name	Type	Default	Description
id *	string | undefined	undefined	Unique identifier for the accordion item
title	string | undefined	undefined	Title of the accordion item
name	string | undefined	undefined	Name of the accordion item
disabled	boolean	false	Disable the accordion item
hoverEffect	boolean	false	Enable hover effect on accordion item

Emits

Name	Arguments	Description
@item-header-click	(item: { event: PointerEvent, expanded: boolean, name: string }) => void	Triggered when an item header is clicked

Slots

Accordion

Name	Parameters	Description
default	()	Content for the accordion items

AccordionItem

Name	Parameters	Description
default	()	Content for the accordion item
header	()	Content for the accordion header
header-extra	()	Content for the extra header beside arrow