Example of Creating the Spoiler Component

To execute the example, the HTML page must contain links to the PP.js script file and the PP.css styles file in the <body> tag of the <div> item with the spoiler identifier. In the onload event of the <body> tag it is necessary to add the call of the createSpoiler() function. Add a drop-down panel on the page and place the button on it:

function createSpoiler() {
    // Create a panel
    spoiler = new PP.Ui.Spoiler({
        // Set a parent item
        ParentNode: document.getElementById("spoiler"),
        // Set direction of the panel disclosure
        Position: PP.Ui.SpoilerPosition.Top,
        // Set panel minimum size
        MinPanelSize: 50,
        // Set panel maximum size
        MaxPanelSize: 250,
        // Set panel sizes
        Height: 100,
        Width: 200,
        // Set sizes of the object used to change panel sizes
        DefaultResizerSize: 5,
        // Set contents margin from the panel border
        DefaultContentMargin: 0,
        // Set title
        Title: "Disclose",
        // Enable panel size change
        EnableResize: true,
        // Enable panel collapse
        EnableCollapse: true,
        // Add a handler of the panel collapse event
        Collapsed: function (sender, args) {
            console.log("Panel is collapsed");
        },
        // Add a handler of the panel expanding
        Expanded: function (sender, args) {
        console.log("Panel is expanded");
    }
    });
    // Add the button        
    spoiler.setContent(new PP.Ui.Button({
        Content: "Hide",
        Click: function (sender, args) {
            // Collapse the panel on the button clicking
            spoiler.setIsExpanded(false);
        }
    }));
}

As a result a drop-down panel with button is added to the page:

After clicking the button the panel is collapsed:

The panel collapsing message is displayed in the console:

Panel is collapsed

After clicking the button with the >> contents, the panel is expanded. The panel expanding message is displayed in the console:

Panel is expanded