---
metaTitle: Accordion fold component | AwesCode UI
meta:
  - name: description
    content: The <AwAccordionFold /> component is used to render Accordion fold - UI Vue component for AwesCode UI.
title: Accordion fold
---

# Accordion Fold

**Category:** Atom | **Import:** Global

The `AwAccordionFold` component provides a collapsible content wrapper with smooth expand/collapse animation.

## Overview

`AwAccordionFold` is a simple component that shows or hides content based on the `show` prop. It uses CSS transitions for smooth expand/collapse animations and automatically calculates the maximum height for the animation.

## Usage

### Basic Example

```markup
<AwButton
    :text="isOpen ? 'Close' : 'Open'"
    color="mono"
    @click="isOpen = !isOpen"
/>
<AwAccordionFold :show="isOpen">
    <AwCard>
        <AwDescription>Your content here</AwDescription>
    </AwCard>
</AwAccordionFold>
```

### Custom Tag

```markup
<AwButton
    text="Toggle Section"
    color="mono"
    @click="isOpen = !isOpen"
/>
<AwAccordionFold :show="isOpen" tag="section">
    <AwCard>
        <AwDescription>Content wrapped in a section tag</AwDescription>
    </AwCard>
</AwAccordionFold>
```

### Multiple Accordions (Single Open)

```markup
<template>
    <AwGrid :gap="1">
        <div v-for="(item, index) in items" :key="index">
            <AwButton
                :text="item.title"
                color="mono"
                class="w-full"
                @click="toggleItem(index)"
            />
            <AwAccordionFold :show="openItems.includes(index)">
                <AwCard>
                    {{ item.content }}
                </AwCard>
            </AwAccordionFold>
        </div>
    </AwGrid>
</template>

<script>
export default {
    data() {
        return {
            openItems: [],
            items: [
                { title: 'First Item', content: 'Content for the first accordion item.' },
                { title: 'Second Item', content: 'Content for the second accordion item.' },
                { title: 'Third Item', content: 'Content for the third accordion item.' }
            ]
        }
    },
    methods: {
        toggleItem(index) {
            const pos = this.openItems.indexOf(index)
            if (pos > -1) {
                this.openItems = []
            } else {
                this.openItems = [index]
            }
        }
    }
}
</script>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| show | Whether content is visible | `Boolean` | `false` | `false` |
| tag | HTML tag for wrapper element | `String` | `false` | `'div'` |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Collapsible content | - | - |

### Events

No events are emitted by this component.

## Related Components

- `AwToggler` - Toggleable content with styled container
- `AwCard` - Card component that may use accordion folds

## Notes

- **Import Method:** Global - Available as atom component
- Uses CSS transitions for smooth animations
- Automatically calculates and sets max-height for animation
- Content is hidden with `v-show` when `show` is false
- Use for collapsible sections, accordions, and expandable content