---
title: Collapse/expand a panel
summary: Provide a collapsible, titled panel whose expand/collapse state survives postback.
status: draft
owner: SAIF Doc Gen
last_reviewed: 2026-08-17
library: SAIF.Presentation.Web.Controls.V2
reference_type: package
operation_id: OP-V2-007
trigger: Control construction, `CreateChildControls`, and postback for a `SAIFPanel` instance.
---

# Collapse/expand a panel

Provide a collapsible, titled panel whose expand/collapse state survives postback. Control construction, `CreateChildControls`, and postback for a `SAIFPanel` instance.

| Field | Value |
| --- | --- |
| **Operation ID** | OP-V2-007 |
| **Trigger** | Control construction, `CreateChildControls`, and postback for a `SAIFPanel` instance. |
| **Inputs** | `PanelState`, hidden-field posted value. |
| **Outputs** | Header, hidden state field, and content panel markup with the correct display style. |
| **Primary components** | `SAIFPanel` |
| **Entry point** | `SAIF.Presentation.Web.Controls.V2/SAIFPanel.vb` |

## Steps

1. On construction, set CSS class `SAIFPanel` and register `/Resources/Scripts/Controls/Panel.js`. ([BR-V2-047](../business-rules.md#br-v2-047-every-saifpanel-carries-a-fixed-css-class-and-script))
2. On `CreateChildControls`, build the header (`Header`/`Title`/`ImageHolder` CSS classes), a `HiddenField` holding the panel state, and the content `Panel` (CSS class `Content`). ([BR-V2-048](../business-rules.md#br-v2-048-panel-structure-is-fixed))
3. Set the content panel's inline style to `display: none;` when collapsed and `display: block;` when expanded. ([BR-V2-049](../business-rules.md#br-v2-049-collapsed-state-hides-content-via-inline-style))
4. Publish `CollapseImgUrl` (`/Resources/Images/Up.png`), `ExpandImgUrl` (`/Resources/Images/Down.png`) and `StateControl` (the hidden field's client ID) as control attributes so `Panel.js` can toggle state on the client. ([BR-V2-050](../business-rules.md#br-v2-050-collapseexpand-urls-and-state-control-exposed-to-client))
5. On postback, read the state back from the hidden field and re-apply the display style. ([BR-V2-051](../business-rules.md#br-v2-051-panel-state-survives-postback))

## Process flow

The following diagram visualizes this operation's control flow.

```mermaid
flowchart TD
	Start([Construction]) --> Css[Set SAIFPanel CSS class, register Panel.js]
	Css --> CCC[CreateChildControls: header, hidden field, content panel]
	CCC --> Style[Apply display style from PanelState]
	Style --> Publish[Publish CollapseImgUrl/ExpandImgUrl/StateControl]
	Publish --> PB{Postback?}
	PB -->|Yes| Read[Read hidden field, re-apply style]
	PB -->|No| Done([Initial render])
	Read --> Done
```

## Failure and edge-case behavior

- No exceptional failure handling beyond the branches described in **Steps** was found in the analysis findings.*

## Related documentation
- [Operations and processes](../operations-processes.md)
- [Business rules](../business-rules.md)

## Sources
- `SAIF.Presentation.Web.Controls.V2/SAIFPanel.vb`