Accordion

import { Accordion } from '@bbc/front-end-kit/vue'

A collapsible content component that can be used to show and hide the content it contains.

Getting started

<template>
    <Accordion v-model:is-open="isOpen" @toggle="onToggle">
        <template #header>
            <!-- Accordion header here -->
        </template>

        <template #content>
            <!-- Accordion content here -->
        </template>
    </Accordion>
</template>

<script setup>
import { ref, watch } from 'vue'
import { Accordion } from '@bbc/front-end-kit/vue'

const isOpen = ref(false)

// toggle listener
function onToggle({ isOpen }) {
    console.log('Accordion is now', isOpen ? 'open' : 'closed')
}

// watcher for the open state
watch(isOpen, (isOpen) => {
    console.log('Accordion is now', isOpen ? 'open' : 'closed')
})
</script>