Accordion

Documentation

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/wc/dist/gd-sprest-bs.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.