# WRTKit ContentPanel Class

## Description

The ContentPanel class implements a control that is used to display arbitrary XHTML content. The content panel can either be foldable (allows users to toggle it open and close) or static. Like all controls the content panel has an optional caption. But unlike for other controls, this caption area is an interactive area that can be used to expand and collapse a foldable content panel. Thus, foldable content panel should always have captions.

Figure 1. Foldable content panel

## Inherits from

Control

## Events

- ExpandedStateChanged

  This event is fired when the expanded state of the content area has changed.

Parent topic: WRTKit API Reference

## Constructor

### Syntax

    [ContentPanel] new ContentPanel(String id, String caption, String content, Boolean foldable, Boolean expanded)

### Description

Creates a new instance of the ContentPanel class.

### Arguments

- id

  Unique identifier for the control. Can be retrieved using the id property defined in the UIElement class that this control inherits from. Useful for example to identify the source of an event in event callback functions or to apply a CSS rule to only this particular control. The identifier can be null, in which case no id will be set for the control.

- caption

  The caption text for the control. A null caption can be used to hide the caption area. This is not recommended if the content panel is folding since users cannot expand or collapse a foldable content panel without the caption area being present.

- content

  The content for the panel. If the argument is omitted or null then the content area will be empty.

- foldable

  Specifies the foldability of the content panel. Specify true to make the content panel foldable and false to make it static. If the argument is omitted or null then the content panel will default to being static.

- expanded

  Specifies the expanded state of a foldable content panel. Specify true to make the content panel expanded and false to make it collapse. If the argument is omitted or null then the content panel will default to being expanded.

### Return value

A new instance of the ContentPanel class.

### Example code

Creating a foldable content panel with content:

    var panel1 = new ContentPanel("panel1", "Example Panel", "This is some content");

Creating a static content panel with content:

    var panel2 = new ContentPanel("panel2", "Example Panel", "This is some content", false);

Creating a foldable content panel and given it content in a separate step:

    var panel3 = new ContentPanel("panel3", "Example Panel");
    panel3.setContent("This is some content");

## getContent()

### Syntax

    [String] ContentPanel.getContent(void)

### Description

Retrieves the current content (an XHTML fragment) of the content panel.

### Arguments

This method does not take any arguments.

### Return value

The current content of the content area.

## setContent()

### Syntax

    [void] ContentPanel.setContent(String content)

### Description

Sets the content for the content panel as a fragment of XHTML. If null is specified as the content then the content area will be empty.

### Arguments

- content

  A fragment of XHTML to set as content for the content area of the content panel. A null value can be used to make the content area empty.

### Return value

This method does not return a value.

## isExpanded()

### Syntax

    [Boolean] ContentPanel.isExpanded(void)

### Description

Retrieves the expanded state of the content area.

### Arguments

This method does not take any arguments.

### Return value

The current expanded state of the content area; true if expanded, false if collapsed.

## setExpanded()

### Syntax

    [void] ContentPanel.setExpanded(Boolean state)

### Description

Sets the expanded state of the content area for a foldable content panel.

### Arguments

- state

  The new expanded state for the content area; true to expand, false to collapse.

### Return value

This method does not return a value.

## contentElement

### Syntax

    [HTMLElement] ContentPanel.contentElement

### Description

The contentElement property allows direct access to the content of a content panel. Typically content is set to a content panel using the setContent() method, passing it an XHTML fragment as a string but if DOM methods are preferred then the contentElement can be used as a root HTML element to attach content to, e.g. using the DOM appendChild() method.