Collapse

Documentation

JavaScript

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

// Create the button to toggle the collapse
$REST.Components.Button({
    el: document.querySelector("#btnCollapse"),
    target: "#demoCollapse",
    toggle: "collapse",
    text: "Collapse Demo"
});

// Create the collapse
var el = document.querySelector("#collapse");
var collapse = Components.Collapse({
    el: el,
    id: "demoCollapse",
    content: "This is the content to be collapsed."
});

TypeScript

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

// Create the button to toggle the collapse
let btn = Components.Button({
    el: document.querySelector("#btnCollapse"),
    target: "#demoCollapse",
    toggle: "collapse",
    text: "Collapse Demo"
});

// Create the collapse
let el = document.querySelector("#collapse");
let collapse = Components.Collapse({
    el: el,
     id: "demoCollapse",
    content: "This is the content to be collapsed."
});

Web Component

<script type="text/javascript" src="https://unpkg.com/gd-sprest-bs/wc/dist/gd-sprest-bs.js"></script>
<bs-button target="#wcCollapseDemo" toggle="collapse" text="Collapse Demo"></bs-button>
<bs-collapse id="wcCollapseDemo" content="This is the content to be collapsed."></bs-collapse>

References

Collapse(props:ICollapseProps):ICollapse

ICollapse

Name Returns Description
dispose () => void Destroys an element’s collapse.
el Element The jquery element.
hide () => void Hides a collapsible element.
show () => void Shows a collapsible element.
toggle () => void Toggles the collapsible element on invocation.

ICollapseOptions

Name Type 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.

ICollapseProps

Name Type Description
className string The class name to apply to collapse.
content string The collapse content.
el HTMLElement The element to render the collapse to.
id string The collapse id.
isMulti boolean Adds the ‘multi-collapse’ class name.
onRender _(props?: ICollapseProps, el?: HTMLDivElement) => void The render event.
options ICollapseOptions The collapse options.