Accordion

JavaScript

var Components = require("gd-sprest-bs").Components;

// Create the accordion
var el = document.querySelector("#accordion");
var accordion = Components.Accordion({
    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."
        }
    ]
});

TypeScript

import { Components } from "gd-sprest-bs";

// Create the accordion
let el = document.querySelector("#accordion");
let accordion = Components.Accordion({
    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."
        }
    ]
});

Web Component

// Return the accordion properties return { 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." } ] }

<script type="text/javascript" src="https://unpkg.com/gd-sprest-bs/dist/gd-sprest-bs-icons.js"></script>
<bs-accordion id="wcAccordionDemo">
    // Return the accordion properties
    return {
        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."
            }
        ]
    }
</bs-accordion>

References

Accordion(props:IAccordionProps):IAccordion

IAccordion

Name	Returns	Description
el	Element	The jquery element.

IAccordionItem

Name	Returns	Description
btnProps	IButtonProps	The button properties.
content	string	The item content to display.
showFl	boolean	Flag to show/hide the content.

IAccordionOptions

Name	Returns	Description
parent	string \| Element	If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown.
toggle	string	Toggles the collapsible element on invocation.

IAccordionProps

Name	Type	Description
className	string	The class name to apply to accordion.
el	HTMLElement	The element to render the accordion to.
id	string	The accordion id.
items	Array<IAccordionItem>	The accordion items.
options	IAccordionOptions	The accordion options.