# Configuring an Accordion Menu

It is possible to create accordion menus, in which hidden contents are displayed by touching the screen.

After changing the Display/Collapsed of layout objects with visibility animation, the switch object location will be automatically adjusted by the Stack Panel and the object display will change.

For information about the function displaying hidden objects on screen, refer to the following.

Stack Panel

What is Animation?

Operation When Visibility Animation is Set Up

## Example Operation

Touch the switch on the Stack Panel to display a collapsed layout object; the objects aligned thereafter will be moved downward. Touch the switch again to collapse the layout object.

## Setting Workflow

Note: This setting example explains the procedure for setting an accordion menu in addition to a screen created with "Configuring a Screen with Multiple Sections.
Configuring a Screen with Multiple Sections

1. Add Variables
2. Add Contents
3. Set Up Parts/Layout

## Add Variables

Add a variable storing the [Visibility] property of the layout object.

### Project Explorer: [Variables] → [All Variables]

Add the below variable(s).

#### Variable Properties

[Name] | [Data Type] | [Initial Value]
Var2 | [INT] | 2
Var3 | [INT] | 2

## Add Contents

### Project Explorer: [Screen Design] → [Contents]

Add the below contents.

#### Content Properties

[Content ID] | [Screen Type]
2 | [Scroll Canvas]
3 | [Scroll Canvas]
4 | [Scroll Canvas]

To set the content color, click the drawing area in the document view and set in the property window.

Note: When designating colors with ID, the displayed colors will vary depending on the [Color Set] in the [Tool Chest].
Color Set

### Project Explorer: [Screen Design] → [Contents] → [Content2]

#### Scroll Canvas Properties

Tab | Property | Value
[Basic] | [Fill] | [Color] | [Value] | ID:26

### Project Explorer: [Screen Design] → [Contents] → [Content3]

#### Scroll Canvas Properties

Tab | Property | Value
[Basic] | [Fill] | [Color] | [Value] | ID:27

### Project Explorer: [Screen Design] → [Contents] → [Content4]

#### Scroll Canvas Properties

Tab | Property | Value
[Basic] | [Fill] | [Color] | [Value] | ID:28

## Set Up Parts/Layout

### Project Explorer: [Screen Design] → [Screens] → [Screen2]

Drag and drop the following objects from the [Tool Chest] to the Layout Object - Stack Panel (name: StackPanel1).

1. Switch Object (Name: Switch2)
2. Layout Object - Stack Panel (Name: StackPanel2)
3. Switch Object (Name: Switch3)
4. Layout Object - Stack Panel (Name: StackPanel3)

5. Switch Object (Name: Switch4 to Switch7)

Note: When aligning the Switch Object (name: Switch3) and Stack Panel (name: StackPanel3), drag and drop them to the outside of the Stack Panel (name: StackPanel2) so that they do not overlap with it. With the Stack Panel (name: StackPanel1) selected, double-click the relevant object in the [Tool Chest] to align it without overlapping.

#### Switch Object (Name: Switch2) Properties

This switch changes the accordion menu display. When the switch is touched, the [Visibility] property of the Layout Object - Stack Panel (name: StackPanel2) is changed to 0 (Display) or 2 (Collapsed).

Tab | Sub Tab | Property | Value
[Function] | [Touch] | [Operation] | [Type] | [Word]
[Operation] | [XOR]
[Source] | 2
[Destination] | [Variable] [Name]: Var2

#### Layout Object - Stack Panel (Name: StackPanel2) Properties

Tab | Property | Value
[Basic] | [Orientation] | [Vertical]
[Height] | 100
[Visibility] | [Variable] [Name]: Var2

#### Switch Object (Name: Switch3) Properties

This switch changes the accordion menu display. When the switch is touched, the [Visibility] property of the Layout Object - Stack Panel (name: StackPanel3) is changed to 0 (Display) or 2 (Collapsed).

Tab | Sub Tab | Property | Value
[Function] | [Touch] | [Operation] | [Type] | [Word]
[Operation] | [XOR]
[Source] | 2
[Destination] | [Variable] [Name]: Var3

#### Layout Object - Stack Panel (Name: StackPanel3) Properties

Tab | Property | Value
[Basic] | [Orientation] | [Vertical]
[Height] | 100
[Visibility] | [Variable] [Name]: Var3

#### Switch Object (Name: Switch4) Properties

Align the switch on top of the Layout Object - Stack Panel (name: StackPanel2).

Tab | Sub Tab | Property | Value
[Function] | [Touch] | [Operation] | [Type] | [Word]
[Operation] | [Set]
[Source] | 1
[Destination] | [Graphical Object] [Screen/Content]: ContentDisplay1 [Source Property]: ScreenId
[Shape] | [Size/Location] | [Width] | 200
[Height] | 50
[Object Alignment] | [Horizontal] | Right-aligned

#### Switch Object (Name: Switch5) Properties

Align the switch on top of the Layout Object - Stack Panel (name: StackPanel2).

Tab | Sub Tab | Property | Value
[Function] | [Touch] | [Operation] | [Type] | [Word]
[Operation] | [Set]
[Source] | 2
[Destination] | [Graphical Object] [Screen/Content]: ContentDisplay1 [Source Property]: ScreenId
[Shape] | [Size/Location] | [Width] | 200
[Height] | 50
[Object Alignment] | [Horizontal] | Right-aligned

#### Switch Object (Name: Switch6) Properties

Align the switch on top of the Layout Object - Stack Panel (name: StackPanel3).

Tab | Sub Tab | Property | Value
[Function] | [Touch] | [Operation] | [Type] | [Word]
[Operation] | [Set]
[Source] | 3
[Destination] | [Graphical Object] [Screen/Content]: ContentDisplay1 [Source Property]: ScreenId
[Shape] | [Size/Location] | [Width] | 200
[Height] | 50
[Object Alignment] | [Horizontal] | Right-aligned

#### Switch Object (Name: Switch7) Properties

Align the switch on top of the Layout Object - Stack Panel (name: StackPanel3).

Tab | Sub Tab | Property | Value
[Function] | [Touch] | [Operation] | [Type] | [Word]
[Operation] | [Set]
[Source] | 4
[Destination] | [Graphical Object] [Screen/Content]: ContentDisplay1 [Source Property]: ScreenId
[Shape] | [Size/Location] | [Width] | 200
[Height] | 50
[Object Alignment] | [Horizontal] | Right-aligned