Accordion Component Nexus Component Styling

This component is not available as a Classic Styling component and can only be used if you select the Use Nexus Component Styling checkbox when creating a view.

The Accordion component inserts a container on the canvas that stores other components, and that can be opened and closed using standard accordion features.

The Accordion component is supported in the Input view and the Details view and is found in the Formatting section of the Components tray.

See Add Board Components for details about adding components to a view.

You can nest accordions inside other accordions for more complicated data display.

Settings

The following setting is available.

Accordion setting

Field	Description	Procedure
Accordion Items	Settings for each of the items in the accordion	Do one of these actions. To add an accordion item Click + Value. Enter the text that displays on the accordion item in the Label field. Select the size of the accordion item from the Height drop-down. Set the Show View Link toggle to on to include a button in the accordion item that you can configure to open a board and view and pass a parameter. See Use a View Link on an Accordion Item for details. Click the checkmark. To edit an option Click the pencil icon next to the option. Make updates as needed. Click the checkmark icon. To delete an option Click the trashcan icon. You must have at least two accordion items for the trashcan icon to display. To change the order of the items Drag the double-ellipsis up or down.

Use a View Link on an Accordion Item

When adding or editing an accordion item, you can use the Show View Link toggle to add a button that displays in the top right of the accordion section. When a user clicks the button, a board view that you specify opens.

To configure the view link that opens when a user clicks the button

1. Ensure the Show View Link toggle is set to on for the accordion item.

2. Click the button that displays on the accordion item on the canvas. The button’s Settings options display on the right.

3. In the Label field, enter the label that will display on the button.

4. In the Board drop-down, select the board that contains the view to open.

5. From the View drop-down, select the view to open.

6. In the Parameter field, enter a parameter to pass to the view if needed.

7. Under Style, in the Type drop-down, select either Button or Link.

   If you select Button, additional styling options display.

8. In the Button Style drop-down, select the style.

9. Under Color, select a color for the button.

10. Under Icon, select an icon to appear on the button.

11. Set up conditional settings for the button to display, if needed. See Add Conditional Components for details.

Style

The following style options are available.

Accordion style options

Field	Description	Procedure
Accordion Layout	Configures the layout of the accordion items.	Select from these options: Default Flush Borderless Alternative
Allow Multiple Expanded	Sets whether multiple accordion items can be open at the same time.	Set the toggle to on to allow multiple accordion items to be open simultaneously. Set the toggle to off to allow only one accordion item to be open at a time.

Conditional

The following Conditional settings are available.

Conditional settings

Field	Description	Procedure
Conditional Settings	The component only appears when certain conditions in relation to another component are met.	See Add a Conditional Component.

Actions Toolbar

The following actions are available when you select any component on the canvas in the Board Workspace when working with Nexus Component Styling.

Actions descriptions

Icon	Name	Description	Procedure
	Settings	Opens the Properties tab next to the Components Tray. You can modify the component’s settings, such as label, database field name, help text, style, and conditional settings.	In Design mode, click the component on the canvas. A toolbar appears on the top right. Click the Settings icon. The Properties tab displays on the right next to the Components tray. Update the settings as needed. Changes display in real time.
	Move		This icon is not used. To move the component, click and drag it to its new location.
	Clone	Copies the current component and its settings, then pastes it after the current component.	In Design mode, click the component on the canvas. A toolbar appears on the top right. Click the Clone icon. The Properties tab displays on the right next to the Components tray. Edit the settings for the cloned component. Changes display in real time.
	Delete	Deletes the selected component.	In Design mode, click the component on the canvas. A toolbar appears on the top right. Click the Delete icon.