Expandable

A collapsible container that can show or hide its content.

Install

Run the following command to install the expandable component:

npx acc-nuxt add Expandable

Basic

Default Open

This section is open by default.

Without Icon

Disable Trigger

As div

Persistent State (via useCookie)

When you pass const cookie = useCookie('my-cookie', { default: () => true }) to v-model, it will remember the open state across page reloads.

Open/close state is remembered across reloads.

Expand/Collapse All

You can control the open state of multiple expandables using a shared v-model.

Custom Icon Example

Slots

The expandable component provides the following slots for customization.

#trigger
The clickable header content that toggles the expandable section.
#default
The content displayed when the expandable is open.
#icon="{ isExpanded }"
Slot for customizing the expand/collapse icon. Receives isExpanded boolean to indicate current state. Hidden when hideIcon prop is true.

Props

hideIcon:boolean— optional
default:false
Hides the default icon slot rendering when true.
disableTrigger:boolean— optional
default:false
Disables the trigger element, making the expandable only toggleable via v-model.
isDiv:boolean— optional
default:false
Renders the expandable as a div instead of a button.

CSS Variables

The expandable component can be customized using the following CSS variables.

--lev-expandable-border-radius
default:5px
Border radius of the expandable container.
--lev-expandable-border
default:1px solid #d9d9d9
Border style of the expandable container.
--lev-expandable-width
default:100%
Width of the expandable container.
--lev-expandable-trigger-display
default:flex
Display property of the trigger element.
--lev-expandable-trigger-gap
default:16px
Gap between trigger content elements. This is only relevant when more than 2 elements are present in the trigger slot
--lev-expandable-trigger-padding
default:16px
Padding inside the trigger element.
--lev-expandable-trigger-justify-content
default:space-between
Justify content property of the trigger element.
--lev-expandable-trigger-align-items
default:center
Align items property of the trigger element.
--lev-expandable-trigger-cursor
default:pointer
Cursor style when hovering over the trigger.
--lev-expandable-trigger-width
default:100%
Width of the trigger element.
--lev-expandable-trigger-transition
default:background-color 100ms ease-out
Transition effect for the trigger element.
--lev-expandable-trigger-border-radius
default:0px
Border radius of the trigger element.
--lev-expandable-trigger-bg
default:#fff
Background color of the trigger element (default/collapsed state).
--lev-expandable-trigger-hover-bg
default:#f2f2f2
Background color of the trigger on hover.
--lev-expandable-trigger-expanded-bg
default:#fff
Background color of the trigger when expanded.
--lev-expandable-trigger-text-gap
default:12px
Gap between elements within the trigger slot content.
--lev-expandable-content-overflow
default:hidden
Overflow property of the content container.
--lev-expandable-content-width
default:100%
Width of the content container.
--lev-expandable-inner-padding
default:16px
Padding inside the expandable content area.
--lev-expandable-inner-bg
default:#fff
Background color of the expandable content area.
--lev-expandable-transition-enter
default:height 0.2s ease-out
Transition effect when expanding.
--lev-expandable-transition-leave
default:height 0.15s ease-out
Transition effect when collapsing.
--lev-expandable-icon-color
default:#808080
Color of the expand/collapse icon.
--lev-expandable-icon-transition
default:transform 0.2s ease
Transition effect for the icon rotation.
--lev-expandable-icon-rotate
default:180deg
Rotation angle of the icon when expanded.

On This Page