Accordion

References

Bootstrap Documentation Code Documentation Properties

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>

Code Playground