EarlyBird Help CenterCollapse
A content area which can be collapsed and expanded, can be used in the Text List option.
Example Usage:
jsx
<div id="faq">
<Collapse className="mt-4 divide-y">
{faq.list.map((row, index) => (
<Collapse.Item key={index}>
{(isExpand, toggle) => (
<li>
<div
className="group py-6 flex w-full items-center justify-between gap-2 text-gray-900 cursor-pointer"
tabIndex={0}
role="button"
aria-expanded={isExpand}
onClick={toggle}
>
<h3 className="text-base text-left font-semibold leading-7">
{row.question}
</h3>
{isExpand ? (
<Icon name="minus-line" className="w-5 h-5" />
) : (
<Icon
name="plus-line"
className="w-5 h-5 opacity-60 group-hover:opacity-100"
/>
)}
</div>
{isExpand && (
<div
className="pb-6 text-base text-gray-700 leading-6"
>
{row.answer}
</div>
)}
</li>
)}
</Collapse.Item>
))}
</Collapse>
</div><div id="faq">
<Collapse className="mt-4 divide-y">
{faq.list.map((row, index) => (
<Collapse.Item key={index}>
{(isExpand, toggle) => (
<li>
<div
className="group py-6 flex w-full items-center justify-between gap-2 text-gray-900 cursor-pointer"
tabIndex={0}
role="button"
aria-expanded={isExpand}
onClick={toggle}
>
<h3 className="text-base text-left font-semibold leading-7">
{row.question}
</h3>
{isExpand ? (
<Icon name="minus-line" className="w-5 h-5" />
) : (
<Icon
name="plus-line"
className="w-5 h-5 opacity-60 group-hover:opacity-100"
/>
)}
</div>
{isExpand && (
<div
className="pb-6 text-base text-gray-700 leading-6"
>
{row.answer}
</div>
)}
</li>
)}
</Collapse.Item>
))}
</Collapse>
</div>json
[
{
name: 'faq',
title: 'FAQ',
fields: [
{
name: 'list',
title: 'Questions and answers',
type: 'list',
fields: [
{
name: 'question',
title: 'Question',
type: 'text',
primary: true,
ai: true
},
{
name: 'answer',
title: 'Answer',
type: 'text',
ai: true
}
],
default: [
{
question: 'Do you provide premium support?',
answer: 'Yes! All business plans include a dedicated account manager.'
},
{
question: 'Can you invoice me?',
answer:
'Yes! We offer invoicing for business and startup plans. Please contact us for details.'
},
{
question: 'I have more questions!',
answer: "Just contact us and we'll be more than happy to help."
}
]
}
]
}
][
{
name: 'faq',
title: 'FAQ',
fields: [
{
name: 'list',
title: 'Questions and answers',
type: 'list',
fields: [
{
name: 'question',
title: 'Question',
type: 'text',
primary: true,
ai: true
},
{
name: 'answer',
title: 'Answer',
type: 'text',
ai: true
}
],
default: [
{
question: 'Do you provide premium support?',
answer: 'Yes! All business plans include a dedicated account manager.'
},
{
question: 'Can you invoice me?',
answer:
'Yes! We offer invoicing for business and startup plans. Please contact us for details.'
},
{
question: 'I have more questions!',
answer: "Just contact us and we'll be more than happy to help."
}
]
}
]
}
]Collapse
as
Type: string
HTML tag name, default is ul
accordion
Type: boolean
If accordion is true, only one item can be expanded at a time, default is false.
CollapseItem
expanded
Type: boolean
Whether the current item is expanded or not, default is false.