accordion

Accordion is used for showing and hiding content but only one item can stay open at a time.

Note on Accordion Components

Accordion uses the same style as the collapse component but it works with radio inputs. You can control which item to be open by checking/unchecking the hidden radio input.

All collapse utilities are already defined in the cjm_fasthtml_daisyui.components.data_display.collapse module.

Accordion Test Examples

---

source

test_accordion_basic_examples

 test_accordion_basic_examples ()

Test basic accordion utilities.

def test_accordion_basic_examples():
    """Test basic accordion 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_accordion_basic_examples()

---

source

test_accordion_modifiers_examples

 test_accordion_modifiers_examples ()

Test accordion modifier utilities.

def test_accordion_modifiers_examples():
    """Test accordion 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_accordion_modifiers_examples()

---

source

test_accordion_basic_fasthtml_examples

 test_accordion_basic_fasthtml_examples ()

Test basic accordion using radio inputs from daisyUI v5 documentation.

def test_accordion_basic_fasthtml_examples():
    """Test basic accordion using radio inputs 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
    
    # First accordion item
    accordion_item_1 = Div(
        Input(type="radio", name="my-accordion-1", checked="checked"),
        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(), border_dui.base_300)
    )
    assert "collapse" in accordion_item_1.attrs['class']
    assert "bg-base-100" in accordion_item_1.attrs['class']
    assert "border" in accordion_item_1.attrs['class']
    assert "border-base-300" in accordion_item_1.attrs['class']
    assert accordion_item_1.children[0].attrs['type'] == "radio"
    assert accordion_item_1.children[0].attrs['name'] == "my-accordion-1"
    assert accordion_item_1.children[0].attrs['checked'] == "checked"
    assert "collapse-title" in accordion_item_1.children[1].attrs['class']
    assert "font-semibold" in accordion_item_1.children[1].attrs['class']
    assert accordion_item_1.children[1].children[0] == "How do I create an account?"
    assert "collapse-content" in accordion_item_1.children[2].attrs['class']
    assert "text-sm" in accordion_item_1.children[2].attrs['class']
    
    # Second accordion item
    accordion_item_2 = Div(
        Input(type="radio", name="my-accordion-1"),
        Div("I forgot my password. What should I do?", cls=combine_classes(collapse_title, font_weight.semibold)),
        Div(
            'Click on "Forgot Password" on the login page and follow the instructions sent to your email.',
            cls=combine_classes(collapse_content, font_size.sm)
        ),
        cls=combine_classes(collapse, bg_dui.base_100, border(), border_dui.base_300)
    )
    assert accordion_item_2.children[0].attrs['name'] == "my-accordion-1"
    assert 'checked' not in accordion_item_2.children[0].attrs
    
    # Third accordion item
    accordion_item_3 = Div(
        Input(type="radio", name="my-accordion-1"),
        Div("How do I update my profile information?", cls=combine_classes(collapse_title, font_weight.semibold)),
        Div(
            'Go to "My Account" settings and select "Edit Profile" to make changes.',
            cls=combine_classes(collapse_content, font_size.sm)
        ),
        cls=combine_classes(collapse, bg_dui.base_100, border(), border_dui.base_300)
    )
    assert accordion_item_3.children[1].children[0] == "How do I update my profile information?"
    assert accordion_item_3.children[2].children[0] == 'Go to "My Account" settings and select "Edit Profile" to make changes.'
    
    # Test that all items share the same radio group name
    assert accordion_item_1.children[0].attrs['name'] == accordion_item_2.children[0].attrs['name']
    assert accordion_item_2.children[0].attrs['name'] == accordion_item_3.children[0].attrs['name']
    
    # Return the accordion items in a Div
    return Div(accordion_item_1, accordion_item_2, accordion_item_3)

# Run the tests
test_accordion_basic_fasthtml_examples()

<div>
  <div class="collapse bg-base-100 border border-base-300">
    <input type="radio" name="my-accordion-1" checked="checked">
    <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 border-base-300">
    <input type="radio" name="my-accordion-1">
    <div class="collapse-title font-semibold">I forgot my password. What should I do?</div>
    <div class="collapse-content text-sm">Click on "Forgot Password" on the login page and follow the instructions sent to your email.</div>
  </div>
  <div class="collapse bg-base-100 border border-base-300">
    <input type="radio" name="my-accordion-1">
    <div class="collapse-title font-semibold">How do I update my profile information?</div>
    <div class="collapse-content text-sm">Go to "My Account" settings and select "Edit Profile" to make changes.</div>
  </div>
</div>

test_func = test_accordion_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_accordion_arrow_fasthtml_examples

 test_accordion_arrow_fasthtml_examples ()

Test accordion with arrow icon from daisyUI v5 documentation.

def test_accordion_arrow_fasthtml_examples():
    """Test accordion with arrow 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
    
    # First accordion item with arrow
    accordion_arrow_1 = Div(
        Input(type="radio", name="my-accordion-2", checked="checked"),
        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, collapse_modifiers.arrow, bg_dui.base_100, border(), border_dui.base_300)
    )
    assert "collapse" in accordion_arrow_1.attrs['class']
    assert "collapse-arrow" in accordion_arrow_1.attrs['class']
    assert "bg-base-100" in accordion_arrow_1.attrs['class']
    assert "border" in accordion_arrow_1.attrs['class']
    assert "border-base-300" in accordion_arrow_1.attrs['class']
    assert accordion_arrow_1.children[0].attrs['type'] == "radio"
    assert accordion_arrow_1.children[0].attrs['name'] == "my-accordion-2"
    assert accordion_arrow_1.children[0].attrs['checked'] == "checked"
    
    # Second accordion item with arrow
    accordion_arrow_2 = Div(
        Input(type="radio", name="my-accordion-2"),
        Div("I forgot my password. What should I do?", cls=combine_classes(collapse_title, font_weight.semibold)),
        Div(
            'Click on "Forgot Password" on the login page and follow the instructions sent to your email.',
            cls=combine_classes(collapse_content, font_size.sm)
        ),
        cls=combine_classes(collapse, collapse_modifiers.arrow, bg_dui.base_100, border(), border_dui.base_300)
    )
    assert "collapse-arrow" in accordion_arrow_2.attrs['class']
    assert accordion_arrow_2.children[0].attrs['name'] == "my-accordion-2"
    assert 'checked' not in accordion_arrow_2.children[0].attrs
    
    # Third accordion item with arrow
    accordion_arrow_3 = Div(
        Input(type="radio", name="my-accordion-2"),
        Div("How do I update my profile information?", cls=combine_classes(collapse_title, font_weight.semibold)),
        Div(
            'Go to "My Account" settings and select "Edit Profile" to make changes.',
            cls=combine_classes(collapse_content, font_size.sm)
        ),
        cls=combine_classes(collapse, collapse_modifiers.arrow, bg_dui.base_100, border(), border_dui.base_300)
    )
    assert "collapse-arrow" in accordion_arrow_3.attrs['class']
    assert accordion_arrow_3.children[1].children[0] == "How do I update my profile information?"
    
    # Test that all arrow items share the same radio group name
    assert accordion_arrow_1.children[0].attrs['name'] == accordion_arrow_2.children[0].attrs['name']
    assert accordion_arrow_2.children[0].attrs['name'] == accordion_arrow_3.children[0].attrs['name']
    
    # Return the accordion items in a Div
    return Div(accordion_arrow_1, accordion_arrow_2, accordion_arrow_3)

# Run the tests
test_accordion_arrow_fasthtml_examples()

<div>
  <div class="collapse collapse-arrow bg-base-100 border border-base-300">
    <input type="radio" name="my-accordion-2" checked="checked">
    <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 collapse-arrow bg-base-100 border border-base-300">
    <input type="radio" name="my-accordion-2">
    <div class="collapse-title font-semibold">I forgot my password. What should I do?</div>
    <div class="collapse-content text-sm">Click on "Forgot Password" on the login page and follow the instructions sent to your email.</div>
  </div>
  <div class="collapse collapse-arrow bg-base-100 border border-base-300">
    <input type="radio" name="my-accordion-2">
    <div class="collapse-title font-semibold">How do I update my profile information?</div>
    <div class="collapse-content text-sm">Go to "My Account" settings and select "Edit Profile" to make changes.</div>
  </div>
</div>

test_func = test_accordion_arrow_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_accordion_plus_fasthtml_examples

 test_accordion_plus_fasthtml_examples ()

Test accordion with plus/minus icon from daisyUI v5 documentation.

def test_accordion_plus_fasthtml_examples():
    """Test accordion 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
    
    # First accordion item with plus/minus
    accordion_plus_1 = Div(
        Input(type="radio", name="my-accordion-3", checked="checked"),
        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, collapse_modifiers.plus, bg_dui.base_100, border(), border_dui.base_300)
    )
    assert "collapse" in accordion_plus_1.attrs['class']
    assert "collapse-plus" in accordion_plus_1.attrs['class']
    assert "bg-base-100" in accordion_plus_1.attrs['class']
    assert "border" in accordion_plus_1.attrs['class']
    assert "border-base-300" in accordion_plus_1.attrs['class']
    assert accordion_plus_1.children[0].attrs['type'] == "radio"
    assert accordion_plus_1.children[0].attrs['name'] == "my-accordion-3"
    assert accordion_plus_1.children[0].attrs['checked'] == "checked"
    
    # Second accordion item with plus/minus
    accordion_plus_2 = Div(
        Input(type="radio", name="my-accordion-3"),
        Div("I forgot my password. What should I do?", cls=combine_classes(collapse_title, font_weight.semibold)),
        Div(
            'Click on "Forgot Password" on the login page and follow the instructions sent to your email.',
            cls=combine_classes(collapse_content, font_size.sm)
        ),
        cls=combine_classes(collapse, collapse_modifiers.plus, bg_dui.base_100, border(), border_dui.base_300)
    )
    assert "collapse-plus" in accordion_plus_2.attrs['class']
    assert accordion_plus_2.children[0].attrs['name'] == "my-accordion-3"
    assert 'checked' not in accordion_plus_2.children[0].attrs
    
    # Third accordion item with plus/minus
    accordion_plus_3 = Div(
        Input(type="radio", name="my-accordion-3"),
        Div("How do I update my profile information?", cls=combine_classes(collapse_title, font_weight.semibold)),
        Div(
            'Go to "My Account" settings and select "Edit Profile" to make changes.',
            cls=combine_classes(collapse_content, font_size.sm)
        ),
        cls=combine_classes(collapse, collapse_modifiers.plus, bg_dui.base_100, border(), border_dui.base_300)
    )
    assert "collapse-plus" in accordion_plus_3.attrs['class']
    assert accordion_plus_3.children[1].children[0] == "How do I update my profile information?"
    assert accordion_plus_3.children[2].children[0] == 'Go to "My Account" settings and select "Edit Profile" to make changes.'
    
    # Test that all plus items share the same radio group name
    assert accordion_plus_1.children[0].attrs['name'] == accordion_plus_2.children[0].attrs['name']
    assert accordion_plus_2.children[0].attrs['name'] == accordion_plus_3.children[0].attrs['name']
    
    # Return the accordion items in a Div
    return Div(accordion_plus_1, accordion_plus_2, accordion_plus_3)

# Run the tests
test_accordion_plus_fasthtml_examples()

<div>
  <div class="collapse collapse-plus bg-base-100 border border-base-300">
    <input type="radio" name="my-accordion-3" checked="checked">
    <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 collapse-plus bg-base-100 border border-base-300">
    <input type="radio" name="my-accordion-3">
    <div class="collapse-title font-semibold">I forgot my password. What should I do?</div>
    <div class="collapse-content text-sm">Click on "Forgot Password" on the login page and follow the instructions sent to your email.</div>
  </div>
  <div class="collapse collapse-plus bg-base-100 border border-base-300">
    <input type="radio" name="my-accordion-3">
    <div class="collapse-title font-semibold">How do I update my profile information?</div>
    <div class="collapse-content text-sm">Go to "My Account" settings and select "Edit Profile" to make changes.</div>
  </div>
</div>

test_func = test_accordion_plus_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_accordion_join_fasthtml_examples

 test_accordion_join_fasthtml_examples ()

Test accordion with join from daisyUI v5 documentation.

def test_accordion_join_fasthtml_examples():
    """Test accordion with join 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
    from cjm_fasthtml_daisyui.components.layout.join import join, join_item, join_directions
    
    # Accordion group using Join
    accordion_join = Div(
        Div(
            Input(type="radio", name="my-accordion-4", checked="checked"),
            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, collapse_modifiers.arrow, join_item, border_dui.base_300, border())
        ),
        Div(
            Input(type="radio", name="my-accordion-4"),
            Div("I forgot my password. What should I do?", cls=combine_classes(collapse_title, font_weight.semibold)),
            Div(
                'Click on "Forgot Password" on the login page and follow the instructions sent to your email.',
                cls=combine_classes(collapse_content, font_size.sm)
            ),
            cls=combine_classes(collapse, collapse_modifiers.arrow, join_item, border_dui.base_300, border())
        ),
        Div(
            Input(type="radio", name="my-accordion-4"),
            Div("How do I update my profile information?", cls=combine_classes(collapse_title, font_weight.semibold)),
            Div(
                'Go to "My Account" settings and select "Edit Profile" to make changes.',
                cls=combine_classes(collapse_content, font_size.sm)
            ),
            cls=combine_classes(collapse, collapse_modifiers.arrow, join_item, border_dui.base_300, border())
        ),
        cls=combine_classes(join, join_directions.vertical, bg_dui.base_100)
    )
    
    # Verify container structure
    assert "join" in accordion_join.attrs['class']
    assert "join-vertical" in accordion_join.attrs['class']
    assert "bg-base-100" in accordion_join.attrs['class']
    
    # Verify first accordion item
    item_1 = accordion_join.children[0]
    assert "collapse" in item_1.attrs['class']
    assert "collapse-arrow" in item_1.attrs['class']
    assert "join-item" in item_1.attrs['class']
    assert "border-base-300" in item_1.attrs['class']
    assert "border" in item_1.attrs['class']
    assert item_1.children[0].attrs['type'] == "radio"
    assert item_1.children[0].attrs['name'] == "my-accordion-4"
    assert item_1.children[0].attrs['checked'] == "checked"
    assert item_1.children[1].children[0] == "How do I create an account?"
    
    # Verify second accordion item
    item_2 = accordion_join.children[1]
    assert "collapse" in item_2.attrs['class']
    assert "collapse-arrow" in item_2.attrs['class']
    assert "join-item" in item_2.attrs['class']
    assert item_2.children[0].attrs['name'] == "my-accordion-4"
    assert 'checked' not in item_2.children[0].attrs
    assert item_2.children[1].children[0] == "I forgot my password. What should I do?"
    
    # Verify third accordion item
    item_3 = accordion_join.children[2]
    assert "collapse" in item_3.attrs['class']
    assert "collapse-arrow" in item_3.attrs['class']
    assert "join-item" in item_3.attrs['class']
    assert item_3.children[0].attrs['name'] == "my-accordion-4"
    assert 'checked' not in item_3.children[0].attrs
    assert item_3.children[1].children[0] == "How do I update my profile information?"
    
    # Test that all items share the same radio group name
    assert item_1.children[0].attrs['name'] == item_2.children[0].attrs['name']
    assert item_2.children[0].attrs['name'] == item_3.children[0].attrs['name']
    
    # Return the accordion join in a Div (it's already a container, but returning for consistency)
    return accordion_join

# Run the tests
test_accordion_join_fasthtml_examples()

<div class="join join-vertical bg-base-100">
  <div class="collapse collapse-arrow join-item border-base-300 border">
    <input type="radio" name="my-accordion-4" checked="checked">
    <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 collapse-arrow join-item border-base-300 border">
    <input type="radio" name="my-accordion-4">
    <div class="collapse-title font-semibold">I forgot my password. What should I do?</div>
    <div class="collapse-content text-sm">Click on "Forgot Password" on the login page and follow the instructions sent to your email.</div>
  </div>
  <div class="collapse collapse-arrow join-item border-base-300 border">
    <input type="radio" name="my-accordion-4">
    <div class="collapse-title font-semibold">How do I update my profile information?</div>
    <div class="collapse-content text-sm">Go to "My Account" settings and select "Edit Profile" to make changes.</div>
  </div>
</div>

test_func = test_accordion_join_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()