collapse

Collapse is used for showing and hiding content.

Base Collapse

The base collapse components:

Exported source 
collapse = SingleValueFactory("collapse", "Collapse/accordion container component") # Collapse container
collapse_title = SingleValueFactory("collapse-title", "Title part of collapse") # Collapse title
collapse_content = SingleValueFactory("collapse-content", "Content part of collapse") # Collapse content

Collapse Modifiers

Collapse modifier utilities:

Exported source 
collapse_modifiers = SimpleFactory(
    {
        "arrow": "collapse-arrow",
        "plus": "collapse-plus",
        "open": "collapse-open",
        "close": "collapse-close"
    },
    "Collapse modifiers (arrow icon, plus/minus icon, force open/close)"
) # Collapse modifiers

Collapse Test Examples

source

test_collapse_basic_examples

 test_collapse_basic_examples ()

Test basic collapse utilities.

Exported source 
def test_collapse_basic_examples():
    """Test basic collapse utilities."""
    # Basic components
    assert str(collapse) == "collapse"
    assert str(collapse_title) == "collapse-title"
    assert str(collapse_content) == "collapse-content"
    
    # With modifiers
    assert str(collapse.hover) == "hover:collapse"
    assert str(collapse_title.md) == "md:collapse-title"
    assert str(collapse_content.dark) == "dark:collapse-content"

# Run the tests
test_collapse_basic_examples()

source

test_collapse_modifiers_examples

 test_collapse_modifiers_examples ()

Test collapse modifier utilities.

Exported source 
def test_collapse_modifiers_examples():
    """Test collapse modifier utilities."""
    assert str(collapse_modifiers.arrow) == "collapse-arrow"
    assert str(collapse_modifiers.plus) == "collapse-plus"
    assert str(collapse_modifiers.open) == "collapse-open"
    assert str(collapse_modifiers.close) == "collapse-close"
    
    # With responsive modifiers
    assert str(collapse_modifiers.arrow.hover) == "hover:collapse-arrow"
    assert str(collapse_modifiers.plus.focus) == "focus:collapse-plus"

# Run the tests
test_collapse_modifiers_examples()

source

test_collapse_basic_fasthtml_examples

 test_collapse_basic_fasthtml_examples ()

Test basic collapse examples: focus, checkbox, and details/summary from daisyUI v5 documentation.

Exported source 
def test_collapse_basic_fasthtml_examples():
    """Test basic collapse examples: focus, checkbox, and details/summary from daisyUI v5 documentation."""
    from fasthtml.common import Div, Input, Details, Summary
    from cjm_fasthtml_tailwind.utilities.borders import border
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, border_dui
    
    # Collapse with focus (tabindex)
    focus_collapse = Div(
        Div("How do I create an account?", cls=combine_classes(collapse_title, font_weight.semibold)),
        Div(
            'Click the "Sign Up" button in the top right corner and follow the registration process.',
            cls=combine_classes(collapse_content, font_size.sm)
        ),
        tabindex="0",
        cls=combine_classes(collapse, bg_dui.base_100, border_dui.base_300, border())
    )
    assert focus_collapse.attrs['tabindex'] == "0"
    assert "collapse" in focus_collapse.attrs['class']
    assert "bg-base-100" in focus_collapse.attrs['class']
    assert "border-base-300" in focus_collapse.attrs['class']
    assert "border" in focus_collapse.attrs['class']
    assert "collapse-title" in focus_collapse.children[0].attrs['class']
    assert "font-semibold" in focus_collapse.children[0].attrs['class']
    assert focus_collapse.children[0].children[0] == "How do I create an account?"
    assert "collapse-content" in focus_collapse.children[1].attrs['class']
    assert "text-sm" in focus_collapse.children[1].attrs['class']
    
    # Collapse with checkbox
    checkbox_collapse = Div(
        Input(type="checkbox"),
        Div("How do I create an account?", cls=combine_classes(collapse_title, font_weight.semibold)),
        Div(
            'Click the "Sign Up" button in the top right corner and follow the registration process.',
            cls=combine_classes(collapse_content, font_size.sm)
        ),
        cls=combine_classes(collapse, bg_dui.base_100, border_dui.base_300, border())
    )
    assert checkbox_collapse.children[0].tag == "input"
    assert checkbox_collapse.children[0].attrs['type'] == "checkbox"
    assert "collapse" in checkbox_collapse.attrs['class']
    assert "bg-base-100" in checkbox_collapse.attrs['class']
    assert "border-base-300" in checkbox_collapse.attrs['class']
    assert "border" in checkbox_collapse.attrs['class']
    assert "collapse-title" in checkbox_collapse.children[1].attrs['class']
    assert "collapse-content" in checkbox_collapse.children[2].attrs['class']
    
    # Collapse using details and summary tag
    details_collapse = Details(
        Summary("How do I create an account?", cls=combine_classes(collapse_title, font_weight.semibold)),
        Div(
            'Click the "Sign Up" button in the top right corner and follow the registration process.',
            cls=combine_classes(collapse_content, font_size.sm)
        ),
        cls=combine_classes(collapse, bg_dui.base_100, border_dui.base_300, border())
    )
    assert details_collapse.tag == "details"
    assert details_collapse.children[0].tag == "summary"
    assert "collapse" in details_collapse.attrs['class']
    assert "bg-base-100" in details_collapse.attrs['class']
    assert "border-base-300" in details_collapse.attrs['class']
    assert "border" in details_collapse.attrs['class']
    assert "collapse-title" in details_collapse.children[0].attrs['class']
    assert "font-semibold" in details_collapse.children[0].attrs['class']
    assert details_collapse.children[0].children[0] == "How do I create an account?"
    assert "collapse-content" in details_collapse.children[1].attrs['class']
    assert "text-sm" in details_collapse.children[1].attrs['class']
    
    # Return all collapse examples in a Div
    return Div(focus_collapse, checkbox_collapse, details_collapse)

# Run the tests
test_collapse_basic_fasthtml_examples()
<div>
  <div tabindex="0" class="collapse bg-base-100 border-base-300 border">
    <div class="collapse-title font-semibold">How do I create an account?</div>
    <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
  </div>
  <div class="collapse bg-base-100 border-base-300 border">
    <input type="checkbox">
    <div class="collapse-title font-semibold">How do I create an account?</div>
    <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
  </div>
<details class="collapse bg-base-100 border-base-300 border"><summary class="collapse-title font-semibold">How do I create an account?</summary>    <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
</details></div>
test_func = test_collapse_basic_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

source

test_collapse_style_fasthtml_examples

 test_collapse_style_fasthtml_examples ()

Test collapse style examples: without border/background, with arrow icon, with plus/minus icon from daisyUI v5 documentation.

Exported source 
def test_collapse_style_fasthtml_examples():
    """Test collapse style examples: without border/background, with arrow icon, with plus/minus icon from daisyUI v5 documentation."""
    from fasthtml.common import Div, Input
    from cjm_fasthtml_tailwind.utilities.borders import border
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, border_dui
    
    # Collapse without border and background
    minimal_collapse = Div(
        Div("How do I create an account?", cls=combine_classes(collapse_title, font_weight.semibold)),
        Div(
            'Click the "Sign Up" button in the top right corner and follow the registration process.',
            cls=combine_classes(collapse_content, font_size.sm)
        ),
        tabindex="0",
        cls=str(collapse)
    )
    assert minimal_collapse.attrs['tabindex'] == "0"
    assert minimal_collapse.attrs['class'] == "collapse"
    assert "collapse-title" in minimal_collapse.children[0].attrs['class']
    assert "font-semibold" in minimal_collapse.children[0].attrs['class']
    assert minimal_collapse.children[0].children[0] == "How do I create an account?"
    assert "collapse-content" in minimal_collapse.children[1].attrs['class']
    assert "text-sm" in minimal_collapse.children[1].attrs['class']
    
    # Collapse with arrow icon
    arrow_collapse = Div(
        Div("How do I create an account?", cls=combine_classes(collapse_title, font_weight.semibold)),
        Div(
            'Click the "Sign Up" button in the top right corner and follow the registration process.',
            cls=combine_classes(collapse_content, font_size.sm)
        ),
        tabindex="0",
        cls=combine_classes(collapse, collapse_modifiers.arrow, bg_dui.base_100, border_dui.base_300, border())
    )
    assert arrow_collapse.attrs['tabindex'] == "0"
    assert "collapse" in arrow_collapse.attrs['class']
    assert "collapse-arrow" in arrow_collapse.attrs['class']
    assert "bg-base-100" in arrow_collapse.attrs['class']
    assert "border-base-300" in arrow_collapse.attrs['class']
    assert "border" in arrow_collapse.attrs['class']
    assert "collapse-title" in arrow_collapse.children[0].attrs['class']
    assert "collapse-content" in arrow_collapse.children[1].attrs['class']
    
    # Collapse with plus/minus icon
    plus_collapse = Div(
        Div("How do I create an account?", cls=combine_classes(collapse_title, font_weight.semibold)),
        Div(
            'Click the "Sign Up" button in the top right corner and follow the registration process.',
            cls=combine_classes(collapse_content, font_size.sm)
        ),
        tabindex="0",
        cls=combine_classes(collapse, collapse_modifiers.plus, bg_dui.base_100, border_dui.base_300, border())
    )
    assert plus_collapse.attrs['tabindex'] == "0"
    assert "collapse" in plus_collapse.attrs['class']
    assert "collapse-plus" in plus_collapse.attrs['class']
    assert "bg-base-100" in plus_collapse.attrs['class']
    assert "border-base-300" in plus_collapse.attrs['class']
    assert "border" in plus_collapse.attrs['class']
    assert "collapse-title" in plus_collapse.children[0].attrs['class']
    assert "font-semibold" in plus_collapse.children[0].attrs['class']
    assert plus_collapse.children[0].children[0] == "How do I create an account?"
    assert "collapse-content" in plus_collapse.children[1].attrs['class']
    assert "text-sm" in plus_collapse.children[1].attrs['class']
    
    # Return all collapse style examples in a Div
    return Div(minimal_collapse, arrow_collapse, plus_collapse)

# Run the tests
test_collapse_style_fasthtml_examples()
<div>
  <div tabindex="0" class="collapse">
    <div class="collapse-title font-semibold">How do I create an account?</div>
    <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
  </div>
  <div tabindex="0" class="collapse collapse-arrow bg-base-100 border-base-300 border">
    <div class="collapse-title font-semibold">How do I create an account?</div>
    <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
  </div>
  <div tabindex="0" class="collapse collapse-plus bg-base-100 border-base-300 border">
    <div class="collapse-title font-semibold">How do I create an account?</div>
    <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
  </div>
</div>
test_func = test_collapse_style_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

source

test_collapse_state_fasthtml_examples

 test_collapse_state_fasthtml_examples ()

Test collapse state examples: force open and force close from daisyUI v5 documentation.

Exported source 
def test_collapse_state_fasthtml_examples():
    """Test collapse state examples: force open and force close from daisyUI v5 documentation."""
    from fasthtml.common import Div
    from cjm_fasthtml_tailwind.utilities.borders import border 
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, border_dui
    
    # Force open collapse
    open_collapse = Div(
        Div("I have collapse-open class", cls=combine_classes(collapse_title, font_weight.semibold)),
        Div(
            'Click the "Sign Up" button in the top right corner and follow the registration process.',
            cls=combine_classes(collapse_content, font_size.sm)
        ),
        tabindex="0",
        cls=combine_classes(collapse, collapse_modifiers.open, bg_dui.base_100, border_dui.base_300, border())
    )
    assert open_collapse.attrs['tabindex'] == "0"
    assert "collapse" in open_collapse.attrs['class']
    assert "collapse-open" in open_collapse.attrs['class']
    assert "bg-base-100" in open_collapse.attrs['class']
    assert "border-base-300" in open_collapse.attrs['class']
    assert "border" in open_collapse.attrs['class']
    assert "collapse-title" in open_collapse.children[0].attrs['class']
    assert "font-semibold" in open_collapse.children[0].attrs['class']
    assert open_collapse.children[0].children[0] == "I have collapse-open class"
    assert "collapse-content" in open_collapse.children[1].attrs['class']
    assert "text-sm" in open_collapse.children[1].attrs['class']
    
    # Force close collapse  
    close_collapse = Div(
        Div("I have collapse-close class", cls=combine_classes(collapse_title, font_weight.semibold)),
        Div(
            'Click the "Sign Up" button in the top right corner and follow the registration process.',
            cls=combine_classes(collapse_content, font_size.sm)
        ),
        tabindex="0",
        cls=combine_classes(collapse, collapse_modifiers.close, bg_dui.base_100, border_dui.base_300, border())
    )
    assert close_collapse.attrs['tabindex'] == "0"
    assert "collapse" in close_collapse.attrs['class']
    assert "collapse-close" in close_collapse.attrs['class']
    assert "bg-base-100" in close_collapse.attrs['class']
    assert "border-base-300" in close_collapse.attrs['class']
    assert "border" in close_collapse.attrs['class']
    assert "collapse-title" in close_collapse.children[0].attrs['class']
    assert "font-semibold" in close_collapse.children[0].attrs['class']
    assert close_collapse.children[0].children[0] == "I have collapse-close class"
    assert "collapse-content" in close_collapse.children[1].attrs['class']
    assert "text-sm" in close_collapse.children[1].attrs['class']
    
    # Return both collapse state examples in a Div
    return Div(open_collapse, close_collapse)

# Run the tests
test_collapse_state_fasthtml_examples()
<div>
  <div tabindex="0" class="collapse collapse-open bg-base-100 border-base-300 border">
    <div class="collapse-title font-semibold">I have collapse-open class</div>
    <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
  </div>
  <div tabindex="0" class="collapse collapse-close bg-base-100 border-base-300 border">
    <div class="collapse-title font-semibold">I have collapse-close class</div>
    <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
  </div>
</div>
test_func = test_collapse_state_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

source

test_collapse_color_fasthtml_examples

 test_collapse_color_fasthtml_examples ()

Test collapse color examples: custom colors for focus and checkbox from daisyUI v5 documentation.

Exported source 
def test_collapse_color_fasthtml_examples():
    """Test collapse color examples: custom colors for focus and checkbox from daisyUI v5 documentation."""
    from fasthtml.common import Div, Input
    from cjm_fasthtml_tailwind.utilities.borders import border
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, border_dui, text_dui
    
    # Custom colors for collapse that works with focus
    custom_focus_collapse = Div(
        Div("How do I create an account?", cls=combine_classes(collapse_title, font_weight.semibold)),
        Div(
            'Click the "Sign Up" button in the top right corner and follow the registration process.',
            cls=combine_classes(collapse_content, font_size.sm)
        ),
        tabindex="0",
        cls=combine_classes(
            bg_dui.primary,
            text_dui.primary_content,
            bg_dui.secondary.focus,
            text_dui.secondary_content.focus,
            collapse
        )
    )
    assert custom_focus_collapse.attrs['tabindex'] == "0"
    assert "collapse" in custom_focus_collapse.attrs['class']
    assert "bg-primary" in custom_focus_collapse.attrs['class']
    assert "text-primary-content" in custom_focus_collapse.attrs['class']
    assert "focus:bg-secondary" in custom_focus_collapse.attrs['class']
    assert "focus:text-secondary-content" in custom_focus_collapse.attrs['class']
    assert "collapse-title" in custom_focus_collapse.children[0].attrs['class']
    assert "font-semibold" in custom_focus_collapse.children[0].attrs['class']
    assert custom_focus_collapse.children[0].children[0] == "How do I create an account?"
    assert "collapse-content" in custom_focus_collapse.children[1].attrs['class']
    assert "text-sm" in custom_focus_collapse.children[1].attrs['class']
    
    # Custom colors for collapse that works with checkbox using peer
    custom_checkbox_collapse = Div(
        Input(type="checkbox", cls="peer"),
        Div(
            "How do I create an account?",
            cls=combine_classes(
                collapse_title,
                bg_dui.primary,
                text_dui.primary_content,
                bg_dui.secondary.peer("checked"),
                text_dui.secondary_content.peer("checked")
            )
        ),
        Div(
            'Click the "Sign Up" button in the top right corner and follow the registration process.',
            cls=combine_classes(
                collapse_content,
                bg_dui.primary,
                text_dui.primary_content,
                bg_dui.secondary.peer("checked"),
                text_dui.secondary_content.peer("checked")
            )
        ),
        cls=combine_classes(bg_dui.base_100, border_dui.base_300, collapse, border())
    )
    assert custom_checkbox_collapse.children[0].tag == "input"
    assert custom_checkbox_collapse.children[0].attrs['type'] == "checkbox"
    assert "peer" in custom_checkbox_collapse.children[0].attrs['class']
    assert "collapse" in custom_checkbox_collapse.attrs['class']
    assert "bg-base-100" in custom_checkbox_collapse.attrs['class']
    assert "border-base-300" in custom_checkbox_collapse.attrs['class']
    assert "border" in custom_checkbox_collapse.attrs['class']
    
    # Verify title styling
    assert "collapse-title" in custom_checkbox_collapse.children[1].attrs['class']
    assert "bg-primary" in custom_checkbox_collapse.children[1].attrs['class']
    assert "text-primary-content" in custom_checkbox_collapse.children[1].attrs['class']
    assert "peer-checked:bg-secondary" in custom_checkbox_collapse.children[1].attrs['class']
    assert "peer-checked:text-secondary-content" in custom_checkbox_collapse.children[1].attrs['class']
    assert custom_checkbox_collapse.children[1].children[0] == "How do I create an account?"
    
    # Verify content styling
    assert "collapse-content" in custom_checkbox_collapse.children[2].attrs['class']
    assert "bg-primary" in custom_checkbox_collapse.children[2].attrs['class']
    assert "text-primary-content" in custom_checkbox_collapse.children[2].attrs['class']
    assert "peer-checked:bg-secondary" in custom_checkbox_collapse.children[2].attrs['class']
    assert "peer-checked:text-secondary-content" in custom_checkbox_collapse.children[2].attrs['class']
    
    # Return both color examples in a Div
    return Div(custom_focus_collapse, custom_checkbox_collapse)

# Run the tests
test_collapse_color_fasthtml_examples()
<div>
  <div tabindex="0" class="bg-primary text-primary-content focus:bg-secondary focus:text-secondary-content collapse">
    <div class="collapse-title font-semibold">How do I create an account?</div>
    <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
  </div>
  <div class="bg-base-100 border-base-300 collapse border">
    <input type="checkbox" class="peer">
    <div class="collapse-title bg-primary text-primary-content peer-checked:bg-secondary peer-checked:text-secondary-content">How do I create an account?</div>
    <div class="collapse-content bg-primary text-primary-content peer-checked:bg-secondary peer-checked:text-secondary-content">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
  </div>
</div>
test_func = test_collapse_color_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()