Accordion¶

The Accordion element provides a collapsible container for content. Users can expand or collapse the accordion to show or hide its contents without triggering a page refresh.

Accordion Class¶

Accordion ¶

Accordion(*, title: str, content: list[Row | Element], is_open: bool = False, reference_id: str | None = '', info_content: str | None = None, **kwargs)

An Accordion Element for toggling the view via expansion for multiple Card-based views.

The Accordion allows users to expand or collapse AccordionCards (Card-based views) without triggering a page refresh. Each segment contains arbitrary content like tables, plots, and input elements.

Parameters:

title (str) –

The title of the segmented control element.
content (list[Row | Element]) –

List of Row or Elements objects to display.
is_open (bool, default: False ) –

Flag set to expand automatically on initial render.
reference_id (str | None, default: '' ) –

A user-defined reference ID for unique identification, defaults to ''.
kwargs –

Additional parameters.

to_json ¶

to_json() -> dict

Convert the element to JSON.

Basic Usage¶

from virtualitics_sdk import Accordion, RichText, Table, Infographic

rich_text = RichText("## Summary")
info = Infographic(id="kpis", title="KPIs", data=[...])
table = Table(id="detail_table", data=detail_df)

# Create the accordion
accordion = Accordion(
    title="Data Views",
    content=[rich_text, info, table],
)

Control State¶

Control whether the accordion starts expanded or collapsed:

# Closed/Collapsed (default)
accordion = Accordion(
    title="Details",
    content=[table],
)

# Open/Expanded
accordion = Accordion(
    title="Details",
    content=[table],
    is_open=True,
)

Programmatic Control¶

Use set_open() to change the accordion state programmatically:

accordion = Accordion(
    title="Details",
    content=[table],
    is_open=False,
)

# Later, expand the accordion
accordion.set_open(True)

# Or collapse it
accordion.set_open(False)

Info Content¶

Add tooltip information using info_content:

accordion = Accordion(
    title="Advanced Settings",
    content=[settings_form],
    info_content="Click to expand and configure advanced options",
)

Complete Example¶

from virtualitics_sdk import (
    Step, Page, Section, Card, Table, PlotlyPlot,
    Accordion, RichText, Infographic, InfographData
)
import plotly.express as px


class AnalysisStep(Step):
    def run(self, flow_metadata):
        df = self._inLink.data.data

        # Summary content always visible
        summary = Infographic(
            id="metrics",
            title="Key Metrics",
            data=[
                InfographData(label="Total", value=f"${df['sales'].sum():,.0f}"),
                InfographData(label="Average", value=f"${df['sales'].mean():,.0f}"),
            ]
        )

        # Detailed chart in collapsible accordion
        fig = px.bar(df, x="product", y="sales", title="Sales by Product")
        chart_accordion = Accordion(
            title="View Chart",
            content=[PlotlyPlot(figure=fig)],
            is_open=False,
        )

        # Raw data in another accordion
        data_accordion = Accordion(
            title="View Raw Data",
            content=[Table(data=df)],
            is_open=False,
        )

        return Page(
            title="Analysis",
            sections=[
                Section(title="Results", cards=[
                    Card(title="Sales Analysis", content=[
                        summary,
                        chart_accordion,
                        data_accordion,
                    ])
                ])
            ]
        )

Validation Rules¶

Must have at least one element in content
info_content must be a string if provided

Best Practices¶

Default state: Keep accordions collapsed by default for secondary content
Clear titles: Use descriptive titles so users know what they'll see when expanding
Appropriate content: Use accordions for optional or supplementary information
Don't nest: Avoid nesting accordions within accordions