Working with General Visual Components > Components > Spoiler > Example of Creating the Spoiler Component

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