Collapse

The Collapse component creates show/hide content areas that can be toggled. Perfect for FAQs, expandable sections, and progressive disclosure patterns.

Goal

Master creating collapsible content, understand Bootstrap collapse classes, and build space-efficient interfaces with expandable sections.

Bootstrap Reference

Bootstrap 5 Collapse Documentation

---

Quick Start

from faststrap import Collapse, Button

# Toggle button
Button(
    "Toggle Content",
    variant="primary",
    data_bs_toggle="collapse",
    data_bs_target="#collapseExample"
)

# Collapsible content
Collapse(
    Card("This content can be toggled!"),
    collapse_id="collapseExample"
)

---

Visual Examples

1. Initially Visible

Collapse(
    "This content is visible by default",
    collapse_id="demo",
    show=True  # ← Initially visible
)

---

2. Horizontal Collapse

Button(
    "Toggle Width",
    data_bs_toggle="collapse",
    data_bs_target="#horizontalCollapse"
)

Collapse(
    Div("Content", style={"width": "300px"}),
    collapse_id="horizontalCollapse",
    horizontal=True
)

---

3. Multiple Targets

# One button toggles multiple collapses
Button(
    "Toggle Both",
    data_bs_toggle="collapse",
    data_bs_target=".multi-collapse"
)

Collapse("First", collapse_id="first", cls="multi-collapse")
Collapse("Second", collapse_id="second", cls="multi-collapse")

---

Common Recipes

FAQ Section

from faststrap import Collapse, Button, Card

Div(
    # Q1
    Button(
        "How do I get started?",
        variant="link",
        cls="text-start w-100",
        data_bs_toggle="collapse",
        data_bs_target="#faq1"
    ),
    Collapse(
        Card("Install with pip install faststrap", cls="mb-3"),
        collapse_id="faq1"
    ),

    # Q2
    Button(
        "Is it free?",
        variant="link",
        cls="text-start w-100",
        data_bs_toggle="collapse",
        data_bs_target="#faq2"
    ),
    Collapse(
        Card("Yes, completely free and open-source!"),
        collapse_id="faq2"
    )
)

---

Bootstrap CSS Classes

Class	Purpose
.collapse	Base collapse class
.collapse.show	Visible state
.collapse-horizontal	Horizontal collapse

---

Parameter Reference

Parameter	Type	Default	Description
*children	Any	Required	Content to show/hide
collapse_id	str	Required	Unique ID for collapse
show	bool	False	Initially visible
horizontal	bool	False	Collapse horizontally
**kwargs	Any	-	Additional HTML attributes

faststrap.components.navigation.listgroup.Collapse(*children, collapse_id, show=False, horizontal=False, **kwargs)

Bootstrap Collapse component.

A collapsible content container that can be toggled.

Parameters:

Name	Type	Description	Default
*children	Any	Content to show/hide	()
collapse_id	str	Required unique ID for the collapse	required
show	bool	Whether collapse is initially visible	False
horizontal	bool	Collapse horizontally instead of vertically	False
**kwargs	Any	Additional HTML attributes	{}

Returns:

Type	Description
Div	FastHTML Div element with collapse classes

Example

Basic collapse:

Button("Toggle", data_bs_toggle="collapse", data_bs_target="#myCollapse") Collapse("Hidden content", collapse_id="myCollapse")

Initially visible:

Collapse("Visible content", collapse_id="demo", show=True)

Horizontal collapse:

Collapse( ... Div("Content", style="width: 300px"), ... collapse_id="horizontal", ... horizontal=True ... )

See Also

Bootstrap docs: https://getbootstrap.com/docs/5.3/components/collapse/

Source code in src/faststrap/components/navigation/listgroup.py

@register(category="navigation", requires_js=True)
def Collapse(
    *children: Any,
    collapse_id: str,
    show: bool = False,
    horizontal: bool = False,
    **kwargs: Any,
) -> Div:
    """Bootstrap Collapse component.

    A collapsible content container that can be toggled.

    Args:
        *children: Content to show/hide
        collapse_id: Required unique ID for the collapse
        show: Whether collapse is initially visible
        horizontal: Collapse horizontally instead of vertically
        **kwargs: Additional HTML attributes

    Returns:
        FastHTML Div element with collapse classes

    Example:
        Basic collapse:
        >>> Button("Toggle", data_bs_toggle="collapse", data_bs_target="#myCollapse")
        >>> Collapse("Hidden content", collapse_id="myCollapse")

        Initially visible:
        >>> Collapse("Visible content", collapse_id="demo", show=True)

        Horizontal collapse:
        >>> Collapse(
        ...     Div("Content", style="width: 300px"),
        ...     collapse_id="horizontal",
        ...     horizontal=True
        ... )

    See Also:
        Bootstrap docs: https://getbootstrap.com/docs/5.3/components/collapse/
    """
    # Build classes
    classes = ["collapse"]

    if horizontal:
        classes.append("collapse-horizontal")

    if show:
        classes.append("show")

    user_cls = kwargs.pop("cls", "")
    all_classes = merge_classes(" ".join(classes), user_cls)

    # Build attributes
    attrs: dict[str, Any] = {"cls": all_classes}
    attrs.update(convert_attrs(kwargs))

    return Div(*children, id=collapse_id, **attrs)