# C2 Accordion Component
### Overview
C2 accordion allows you to pass in a section title, description and load an c2 accordion items section inside this block
### Slots
| Name        |
| ----------- |
| title       |
| desc        |
| items       |

### Code snippet
```
<c2-accordion>
    <template v-slot:title>
        <h2 class="text-2xl mb-1">
            Accordion Section title
        </h2>
    </template>
    
    <template v-slot:desc>
    <p class="mb-4">
        Description text here
    </p>
    </template>

    <template v-slot:items>
    <div class="items-wrapper">
        <c2-accordion-item 
            v-for="(item, index) in accordionItems"
            :key="index"
            :is-open="item.isOpen"
            :button-classes="'flex items-center w-full justify-between'"
            :panel-classes="'w-full'"
            class="w-full max-w-xs"
        >
            <template v-slot:button>
                <span class="title">{{ item.name }}</span>
                <span class="icon">+</span>
            </template>
            
            <template v-slot:content>
                <div 
                    v-html="item.desc"
                    class="rich-text"
                ></div>
            </template>
        </c2-accordion-item>
    </div>
    </template>
</c2-accordion>
```

# C2 Accordion Item Component
### Overview
C2 accordion item displays each item in the accordion.

### Props
| Props             | Type      |
| ----------------- | --------- |
| allowOneOpenPanel | Boolean   |
| buttonClasses     | Array, String    |
| panelClasses      | String    |
| isDisabled        | Boolean   |
| isOpen            | Boolean   |
### Slots
| Name        |
| ----------- |
| button      |
| content     |

### Code snippet
```
<c2-accordion-item 
    v-for="(item, index) in accordionItems"
    :key="index"
    :is-open="item.isOpen"
    :button-classes="'flex items-center w-full justify-between'"
    :panel-classes="'w-full'"
    class="w-full max-w-xs"
>
    <template v-slot:button>
        <span class="title">{{ item.name }}</span>
        <span class="icon">+</span>
    </template>
    
    <template v-slot:content>
        <div 
            v-html="item.desc"
            class="rich-text"
        ></div>
    </template>
</c2-accordion-item>
```