Accordion
References
TypeScript
import { Components } from "gd-sprest-bs";
// Create the accordion
let el = document.querySelector("#accordion");
let accordion = Components.Accordion({
autoCollapse: true,
el: el,
id: "demoAccordion",
items: [
{
btnProps: { text: "Item 1" },
content: "This is the content for item 1."
},
{
btnProps: { text: "Item 2" },
content: "This is the content for item 2."
},
{
btnProps: { text: "Item 3" },
content: "This is the content for item 3."
}
]
});
React
import * as React from "react";
import { Accordion } from "gd-sprest-bsx";
export class IDemo extends React.Component {
// Render the component
render() {
return (
<Accordion
autoCollapse={true}
id="demoAccordion"
items={[
{ btnProps: { text: "Item 1" }, content: "This is the content for item 1." },
{ btnProps: { text: "Item 2" }, content: "This is the content for item 2." },
{ btnProps: { text: "Item 3" }, content: "This is the content for item 3." },
]}
/>
);
}
}
VueJS
<template>
<Accordion auto-collapse="true" id="demoAccordion" v-bind:items="demoItems" />
</template>
<script>
import { Accordion } from "gd-sprest-bs-vue";
export default {
components: { Accordion },
data() {
return {
demoItems: [
{ btnProps: { text: "Item 1" }, content: "This is the content for item 1." },
{ btnProps: { text: "Item 2" }, content: "This is the content for item 2." },
{ btnProps: { text: "Item 3" }, content: "This is the content for item 3." },
]
};
}
}
</script>