Skip to content

Accordion

Accordion is a container of collapsible sections where expanding one section can automatically collapse the others.

It manages a group of Expander widgets, providing mutual exclusion behavior and optional constraints like requiring at least one section to remain open.

Quick start

import bootstack as bs

app = bs.App()

accordion = bs.Accordion(app, accent="primary", variant="solid")
accordion.pack(fill="x", padx=10, pady=10)

section1 = accordion.add(title="General Settings")
bs.CheckButton(section1.content, text="Enable feature").pack(anchor="w")

section2 = accordion.add(title="Advanced Settings")
bs.Label(section2.content, text="Advanced options here").pack()

section3 = accordion.add(title="About")
bs.Label(section3.content, text="Version 1.0").pack()

app.mainloop()

When to use

Use Accordion when:

  • you have multiple related sections and want only one visible at a time

  • screen space is limited and mutual exclusion helps focus attention

  • you want a structured, step-by-step flow (e.g., wizard-like forms)

Consider a different control when:

  • sections should be independently collapsible -- use multiple Expander widgets

  • content switching should use tabs -- use Notebook

  • all sections should always be visible -- use LabelFrame or Frame

Appearance

Styling

Pass accent and variant to apply a consistent style to all managed expanders.

bs.Accordion(app, accent="success", variant="solid")

Border

Use show_border=True to add a visible border around the accordion container.

bs.Accordion(app, show_border=True)

Separators

Use show_separators=True to add horizontal separators between sections.

bs.Accordion(app, show_separators=True)

Examples & patterns

Adding sections

Use add() to create new expander sections. It returns the Expander widget.

accordion = bs.Accordion(app)
accordion.pack(fill="x")

section = accordion.add(title="Section Title", icon={'name': 'gear', 'size': 16})
bs.Label(section.content, text="Section content").pack()

Adding existing expanders

You can add pre-created Expander widgets:

exp = bs.Expander(accordion, title="Custom Expander")
accordion.add(exp)

Removing sections

Use remove() to remove a section by its key:

# Add with explicit key
section = accordion.add(key="temp", title="Temporary")

# Remove by key
accordion.remove("temp")

# Get all keys
for key in accordion.keys():
    print(key)

Multiple selection mode

By default, only one section can be open at a time. Set allow_multiple=True to allow multiple sections to be open simultaneously.

accordion = bs.Accordion(app, allow_multiple=True)

Non-collapsible mode

Set allow_collapse_all=False to require at least one section to remain open. The first section is automatically expanded.

accordion = bs.Accordion(app, allow_collapse_all=False)

Starting with a section expanded

section1 = accordion.add(title="First", expanded=True)
section2 = accordion.add(title="Second")  # collapsed by default

Programmatic control

accordion.expand("section1")   # Expand by key
accordion.collapse("section2") # Collapse by key

# With allow_multiple=True only:
accordion.expand_all()
accordion.collapse_all()

# Access expanders
for exp in accordion.items():
    print(exp.cget('title'))

# Get currently expanded sections
for exp in accordion.expanded:
    print(f"Open: {exp.cget('title')}")

# Query configuration
if accordion.cget('allow_multiple'):
    print("Multiple selection enabled")

Responding to changes

def on_accordion_changed(event):
    expanded = event.data['expanded']
    titles = [exp.cget('title') for exp in expanded]
    print(f"Open sections: {titles}")

accordion.on_accordion_changed(on_accordion_changed)

Behavior

  • When allow_multiple=False (default), opening one section closes all others.

  • When allow_collapse_all=False, attempting to close the last open section is prevented.

  • The <<AccordionChange>> event fires with event.data = {'expanded': list[Expander]}.

  • All managed expanders automatically have highlight=True set to show selection state.

  • Keyboard accessible: Tab to navigate between sections, Enter/Space to toggle.

Configuration

Construction options

Option Type Default Description
allow_multiple bool False Allow multiple sections open at once
allow_collapse_all bool True Allow all sections to be closed
show_separators bool False Show separators between sections
accent str None Accent applied to all expanders
variant str None Variant applied to all expanders

Additional resources

  • Expander -- individual collapsible section

  • Notebook -- tabbed content switching

  • LabelFrame -- always-visible labeled container

  • Frame -- general-purpose container

Framework concepts

API reference