Collapse

less than 1 minute read

References

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."
});

React

import * as React from "react";
import { Button, Collapse } from "gd-sprest-bsx";

export class IDemo extends React.Component {
    // Render the component
    render() {
        return (
            <div>
                <Button
                    target="#demoCollapse"
                    toggle="collapse"
                    text="Collapse Demo"
                />
                <Collapse
                    id="demoCollapse"
                    content="This is the content to be collapsed."
                />
            </div>
        );
    }
}

VueJS

<template>
    <div>
        <Button target="#demoCollapse" toggle="collapse" text="Collapse Demo" />
        <Collapse id="demoCollapse" content="This is the content to be collapsed." />
    </div>
</template>

<script>
import { Button, Collapse } from "gd-sprest-bs-vue";
export default {
    components: { Button, Collapse }
}
</script>

Code Playground