<!DOCTYPE html>
<html>

<head>
    <title>CollapsiblePanel in Accordeon 1.0.0</title>
    <meta charset="utf-8">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0">

    <script>
        class App {
            static get implements() {
                return [];
            };
            static start() {
                window["app"] = new App();
                app.models = [];
                ONCE.eventSupport.addEventListener("newInstance", app, app.newInstance.bind(app));
                var programmaticAccordion = Accordion.getInstance().init();
                programmaticAccordion.defaultView.append();

                var cp1 = CollapsiblePanel.getInstance().init();
                cp1.heading = "programmatic CollapsiblePanel";
                programmaticAccordion.add(cp1);

                var cp2 = CollapsiblePanel.getInstance().init();
                cp2.heading = "programmatic CollapsiblePanel 2";
                programmaticAccordion.add(cp2);

                var declarativeAccordeon = document.body.children[0].ucpView.ucpComponent;

                var cp3 = CollapsiblePanel.getInstance().init();
                cp3.heading = "cool Man";
                declarativeAccordeon.add(cp3);

            }
            static init() {
                console.debug("start loading App components...");
                return "start loading App components...";
            }

            newInstance(event, thing) {
                app.models.push(thing);
            }
        }
    </script>

    <script src="/EAMD.ucp/Components/tla/EAM/layer1/Thinglish/Once/1.0.0/src/js/Once.class.js" type="text/javascript"></script>
    <link href="/EAMD.ucp/Components/com/twitter/Bootstrap/Accordion/CollapsiblePanel/1.0.0/CollapsiblePanel.component.xml" rel="ucpComponent" type="text/html">

    <style type="text/css">
        html,
        body {
            height: 100%;
            overflow: auto
        }
        
        .fullHeight {
            height: 100%;
        }
        
        header,
        footer,
        .panel-heading,
        .panel-footer {
            height: 10%;
            background-color: lightblue;
        }
        
        .content,
        .panel-body {
            height: 80%;
            overflow-y: scroll
        }
        
        .drop-target {
            background-color: #29e;
            border-color: #fff;
            border-style: solid;
        }
    </style>
</head>

<body>
    <div data-is="bootstrap-accordion" id="accordeon_1" role="tablist">
        <div data-is="bootstrap-collapsible-panel" heading="Properties">
            Properties Content
        </div>
        <div data-is="bootstrap-collapsible-panel" heading="Relationships">
            Relationships Content
        </div>
        <div data-is="bootstrap-collapsible-panel" heading="Collections">
            Collections Content
        </div>
        <div data-is="bootstrap-collapsible-panel" heading="Methods">
            Methods Content
        </div>
    </div>
</body>

</html>